আইপ্যাড সাফারি স্ক্রোলিংয়ের ফলে এইচটিএমএল উপাদানগুলি বিলম্বিত হয়ে অদৃশ্য হয়ে যায় re

Question

আমি বর্তমানে এইচডিএমএল 5 এবং আইপ্যাড সাফারির জন্য jQuery ব্যবহার করে একটি ওয়েব অ্যাপ বিকাশ করছি। আমি এমন একটি সমস্যায় পড়ছি যেখানে বড় স্ক্রোল অঞ্চলগুলি যখন আমি স্ক্রোল করি তখন দেরি হওয়ার পরে অফস্ক্রিনযুক্ত উপাদানগুলি উপস্থিত হয় appear

এর দ্বারা আমি যা বোঝাতে চাইছি তা হল, যদি আমার কাছে একটি সারি চিত্র (বা গ্রেডিয়েন্ট সহ একটি ডিভি) থাকে যা অফস্ক্রিন হয়, যখন আমি এটিতে স্ক্রোল করে (বা উপরে) চলে যাই, প্রত্যাশিত আচরণটি উপাদানটির পর্দায় প্রদর্শিত হওয়ার জন্য হয় আমি এটিতে স্ক্রোল করছি।

যাইহোক, আমি যা দেখছি তা হল যে আমি স্ক্রিনটি থেকে আমার আঙুলটি না সরিয়ে স্ক্রোলার এর সমস্ত অ্যানিমেশনগুলি শেষ না করা পর্যন্ত উপাদানটি উপস্থিত হবে না।

এটি আমার পক্ষে একটি দুর্দান্ত লক্ষণীয় সমস্যা সৃষ্টি করছে, যদিও এটি পুরোপুরি না হলেও পুরো জিনিসটিকে চপ্পল দেখাচ্ছে। আমি ধারণা করছি আইপ্যাড সাফারি স্মৃতি সঞ্চয় করতে কিছু করার চেষ্টা করছে। এমন কোনও উপায় আছে যার মাধ্যমে আমি এই চপ্পটি-বাসা আটকাতে পারি। অতিরিক্তভাবে, আমি আইপ্যাড সাফারি আসলে কী করার চেষ্টা করছে সে সম্পর্কে কেউ আলোকপাত করতে পারলে আমিও তাদের প্রশংসা করব।

Comments

এই সমস্যা / সমাধানটি আমাকে jPanelMenu 1.3 সিএসএস ট্রান্সফর্ম সংস্করণ দিয়ে একটি সমস্যা সমাধান করতে সহায়তা করেছে, যা উপরের স্নিপেটটি যোগ না করা পর্যন্ত আমার সাইট ইনভিসিবিতে সমস্ত কিছু ঘুরিয়ে দিয়েছে।

— 75 তম ট্রম্বোন

*: নয় (এইচটিএমএল) ব্যবহার করা আপনার সাইটের অন্য সমস্ত ক্ষেত্রে ট্রান্সলেট 3 ডি প্রয়োগ করবে এবং আমি প্রস্তাব দিই না। এটি আপনি যখন স্ক্রল ডাউন করার সাথে সাথে ট্যাবগুলিতে চিত্রগুলি অদৃশ্য হয়ে যাবে, ইত্যাদি, আপনি কেবল আপনার 3 ডি চিত্রগুলিতে দেখার জন্য ব্যবহার করতে পারেন তা এখন আপনার সাইটের অন্যান্য দিকগুলিতে উপস্থিত থাকবে।

— জোনাথন টঙ্গি

আমার কাছে কয়েকটি <svg>উপাদান ছিল যা অনুরূপ বিলম্বিত অঙ্কন / উপস্থাপনা প্রদর্শন করছিল। দুর্ভাগ্যক্রমে, *:not(html) { ... }সমস্ত ধরণের অদ্ভুত আচরণের কারণ হিসাবে @ জোনাথন টঙ্গি দেখিয়েছে যে ঘটতে পারে। তবে, কেবলমাত্র <svg>উপাদানগুলি নির্বাচন করা এবং ব্যবহারে translate3d(0, 0, 0,);আমার স্ক্রোলিংয়ের সমস্যাগুলি সমাধান হয়েছে বলে মনে হয়।

— পশ্চিমা বাতাস Mays

খুব নির্দিষ্ট ব্যবহারের ক্ষেত্রে বাদে এটি আবর্জনা। সত্যিই নিখুঁত অবস্থানের উপাদানগুলির উপর নির্ভর করে এমন লেআউটগুলি গণ্ডগোল করে।

— স্টুটি

আপনার প্রশ্নের "সম্পাদনা" নয়, উত্তর হিসাবে উত্তর পোস্ট করুন। আমি জানি আপনি আপনার উত্তরটি সবচেয়ে ভাল পছন্দ করেছেন এবং এটি দুর্দান্ত, তবে স্ট্যাকওভারফ্লোতে একটি প্রশ্নোত্তর ফর্ম্যাট রয়েছে যা Q এর A এর থেকে আলাদা হলে সবচেয়ে ভাল কাজ করে।

— স্লিপ ডি থম্পসন

Answer 1

আপনাকে আরও কার্যকরভাবে হার্ডওয়্যার ত্বরণ ব্যবহার করতে ব্রাউজারটি চালিত করতে হবে। আপনি খালি 3 ডি রূপান্তর দিয়ে এটি করতে পারেন:

-webkit-transform: translate3d(0,0,0)

বিশেষত, আপনার শিশুর উপাদানগুলির একটি দরকার position:relative;যাগুলির একটি ঘোষণা রয়েছে (বা, সমস্ত কিছু বেরিয়ে এসে সমস্ত শিশু উপাদানগুলিতে এটি করুন)।

কোনও গ্যারান্টিযুক্ত ফিক্স নয়, বেশিরভাগ সময় মোটামুটি সফল।

হাট টিপ: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Comments

আমি তাও চেষ্টা করেছি। দুঃখের বিষয়, একটি ট্রান্সলেটেড 3 ডি যুক্ত করা উপাদানগুলি কেটে ফেলা হচ্ছে যা আগে সঠিকভাবে প্রদর্শিত হয়েছিল। আমার কাছে বেশ কয়েকটি অবজেক্টের জন্য হার্ডওয়্যার ত্বরণ প্রয়োজন যা অফস্ক্রিন ছিল এবং স্ক্রিনে "ফ্লাই ইন" করতে অ্যানিমেটেড হতে হয়েছিল। আমি jQuery এর অ্যানিমেট () ব্যবহার করছিলাম যা অতি ধীর ছিল। আমি হার্ডওয়্যার ত্বরণ ব্যবহার করে স্যুইচ করেছি। যদিও এটি অ্যানিমেশনে গতি বাড়িয়েছে, তবুও এটি তাত্পর্যপূর্ণ ফলাফল এনেছে যে পিতামাতার কিছু কিছু উপাদান (অ্যানিমেটিং) কেটে ফেলা হয়েছিল। আমি যখন অ্যানিমেট () ব্যবহার করছিলাম তখন এটি ঘটছিল না।

— কোডবিয়ারার

@ কলিন উইলিয়ামস আপনি সবেমাত্র আমার দিনটি তৈরি করেছেন! : ডি

— লুক

বাহ, এটি ভয়ঙ্কর তবে কার্যকর। ধন্যবাদ.

— টিম ডাউন

লিঙ্কটি নষ্ট হয়ে গেছে। নতুন লিঙ্ক: cantina.co/thought_leilership/… ক্যাচড : web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/…

— থিনসোল্ডার

স্বর্ণের ফ্রিকিন তারকা মানুষ! আমি এটিকে আমার সমস্ত লি উপাদানগুলিতে স্ক্রোলযোগ্য ডিভিতে যুক্ত করেছি। সমকামী। কাজ করছে.

— ব্রায়ান জনসন

Answer 2

এটি আমার প্রশ্নের সম্পূর্ণ উত্তর is আমি মূলত @ কলিন উইলিয়ামসের উত্তরটিকে সঠিক উত্তর হিসাবে চিহ্নিত করেছি, কারণ এটি আমাকে সম্পূর্ণ সমাধান পেতে সহায়তা করেছিল। @ স্লিপ ডি থম্পসন একটি সম্প্রদায়ের সদস্য আমার প্রশ্নটি সম্পাদনা করেছিলেন, আমার প্রায় 2.5 বছর পরে এটি জিজ্ঞাসা করেছিলেন, এবং আমাকে বলেছিলেন যে আমি এসও এর প্রশ্নোত্তর ও এ ফর্ম্যাটটি গালাগাল করছি। তিনি আমাকে উত্তর হিসাবে আলাদাভাবে পোস্ট করতে বলেছিলেন। সুতরাং আমার সমস্যার সমাধান করার সম্পূর্ণ উত্তরটি এখানে:

@ কলিন উইলিয়ামস, আপনাকে ধন্যবাদ! আপনার উত্তর এবং আপনি যে নিবন্ধটি সংযুক্ত করেছেন তাতে আমাকে সিএসএস দিয়ে কিছু চেষ্টা করার নেতৃত্ব দিয়েছে।

সুতরাং, আমি আগেও অনুবাদ 3 ডি ব্যবহার করছিলাম। এটি অবাঞ্ছিত ফলাফল উত্পন্ন। মূলত, যতক্ষণ না আমি তাদের সাথে কথা বলি ততক্ষণ এটি অফস্ক্রিনযুক্ত উপাদানগুলি কেটে যায় এবং রেন্ডার করে না। সুতরাং, মূলত, ল্যান্ডস্কেপ অভিযোজনে, আমার অর্ধেক সাইট যা অফস্ক্রিন ছিল তা প্রদর্শিত হচ্ছে না। এটি একটি আইপ্যাড ওয়েব অ্যাপ্লিকেশন, যার কারণে আমি ঠিক হয়ে গিয়েছিলাম।

তুলনামূলকভাবে অবস্থানযুক্ত উপাদানগুলিতে অনুবাদ 3 ডি প্রয়োগ করা সেই উপাদানগুলির জন্য সমস্যাটি সমাধান করেছে, তবে অন্য উপাদানগুলি একবার স্ক্রিন হয়ে রেন্ডারিং বন্ধ করে দিয়েছে। আমি যে উপাদানগুলি (আর্টওয়ার্ক) এর সাথে ইন্টারঅ্যাক্ট করতে পারিনি সেগুলি আর কখনও রেন্ডার করতে পারে না, যদি না আমি পৃষ্ঠাটি লোড না করি।

সম্পূর্ণ সমাধান:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

এখন, যদিও এটি সর্বাধিক "দক্ষ" সমাধান নাও হতে পারে তবে এটি কেবলমাত্র কাজ করে। মোবাইল সাফারি যখন ব্যবহার করেন তখন স্ক্রিনযুক্ত উপাদানগুলিকে রেন্ডার করে না বা কখনও কখনও ত্রুটিযুক্তভাবে রেন্ডার করে না -webkit-overflow-scrolling: touch। সেই স্ক্রোলটির কারণে অন্য সমস্ত উপাদানগুলিতে অনস্ক্রিনে যেতে পারে এমন কোনও ট্রান্সলেট 3 ডি প্রয়োগ না করা থাকলে সেই উপাদানগুলি স্ক্রোলিংয়ের পরে কেটে যাবে।

সুতরাং, আবারও ধন্যবাদ, এবং আশা করি এটি অন্য কিছু হারানো আত্মাকে সহায়তা করবে। এটি অবশ্যই আমাকে বড় সময় সাহায্য করেছিল!

Comments

কি দারুন. এর জন্য ধন্যবাদ. এটি আমার ফোনগ্যাপ / কর্ডোভা অ্যাপ্লিকেশনটির জন্য আমাকে প্রচুর পরিমাণে মাথা ব্যথা বাঁচিয়েছে। আমার ক্ষেত্রে আমাকে পরিবর্তন *:not(html)করতে হয়েছিলbody *

— আনান

শুধু প্রয়োগের -webkit-transform: translate3d(0, 0, 0);সমস্যা উপাদান আমার জন্য কাজ করে। আমার ক্ষেত্রে আমি স্ক্রোলমাজিক

— fidev

এর কোনওটিই আমার পক্ষে কাজ করেনি। আমি একটি নির্দিষ্ট বিন্দুতে স্ক্রোল করার সাথে সাথেই উইন্ডোর ওপরে আর-দৃশ্যমান স্টাফগুলি তন্দ্রাচ্ছন্ন হয়ে যায়, পাশাপাশি ভিউপোর্টের কিছু উপাদান। আমি একটি খুব সামান্য কিন্তু দ্বিধাহীন "ঝলক" লক্ষ্য করছি যখন এটি স্ক্রোলিংয়ের পরে উপাদানগুলি হোজে উঠছে। (যেমন: মসৃণ - জটলা - মসৃণ আচরণ, যেমন এটি স্ক্রোলিংয়ের সময় হিচাপি করে।) এটি আইপ্যাডে রয়েছে।

— cbmtrx

বিটিডাব্লু আমি সবেমাত্র আবিষ্কার করেছি যে একটি আইপ্যাড এয়ার 2-তে, যখন কোনও নির্দিষ্ট অন-স্ক্রিন উপাদান (কোনও নভবার, এই ক্ষেত্রে) স্ক্রিন বন্ধ হয়ে যায়, তখন ডিভাইসটি সেই ব্লকটিকে "পুনরায় লোড করে" - কেবলমাত্র বড় সংস্করণ ব্যবহার করে, আসল মাঝারিটি ব্যবহার করে না যে পৃষ্ঠাটি বোঝা। কি ...

— cbmtrx

যদি কেউ আমার মতো অদ্ভুততা অনুভব করে - তবে এই পৃষ্ঠায় বর্ণিত বর্ণনার থেকে কিছুটা আলাদা - আমি দেখতে পেলাম যে jQuery এর $(window).width()পরিবর্তে ব্যবহার করা window.innerWidthআইওএসের জন্য সমস্ত পার্থক্য করেছে। কে জানে.

— cbmtrx

Answer 3

এইচটিএমএল ছাড়াও সমস্ত উপাদানকে লক্ষ্য করে: *:not(html) আমার ক্ষেত্রে অন্যান্য উপাদানগুলিতে সমস্যা সৃষ্টি করেছে। এটি স্ট্যাকিং প্রসঙ্গে পরিবর্তন করে, কিছু জেড-সূচককে ভেঙে দেয়।

আমাদের সঠিক উপাদানটিকে লক্ষ্য করার চেষ্টা করা উচিত এবং -webkit-transform: translate3d(0,0,0)কেবল এটিতে প্রয়োগ করা উচিত।

সম্পাদনা করুন: কখনও কখনও এটি translate3D(0,0,0)কাজ করে না, আমরা সঠিক উপাদানটিকে লক্ষ্য করে নিম্নলিখিত পদ্ধতিটি ব্যবহার করতে পারি:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Comments

আমি একই সমস্যা ছিল। আপনি এর body *পরিবর্তে নির্বাচক ব্যবহার করতে পারেন *:not(html)। এটি আপনার সমস্যার সমাধান করবে।

— কুণাল

* * দিয়ে সবকিছুকে দূষিত না করে সঠিক উপাদানগুলিকে টার্গেট করার পরামর্শের জন্য

— কুদোস

Answer 4

অনুবাদ 3 ডি যখন কাজ না করে তখন দৃষ্টিকোণ যুক্ত করার চেষ্টা করুন। এটা সবসময় আমার জন্য কাজ করে

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Comments

পবিত্র সি $ # @ পরিশেষে কৌণিক / আয়নিকের জন্য একটি সমাধান। -webkit-perspective: 1000;

— lilbiscuit

আহ আমার দিন বাঁচিয়েছে। আপনার জন্য +1;)

— ওমর বাহির

এটি আমার আইওএস ব্রাউজার ক্র্যাশ করেছে।

— আন্দ্রেয়াস রিখটার

-webkit-perspective: 1000;আমার জন্য এটি করেছেন - আপনাকে ধন্যবাদ

— jHilscher

Answer 5

-webkit-transform: translate3d(0,0,0)কোনও উপাদানকে স্থিতিশীলভাবে যুক্ত করা আমার পক্ষে কার্যকর হয় না।

আমি এই সম্পত্তিটি গতিশীলভাবে প্রয়োগ করি। উদাহরণস্বরূপ, যখন কোনও পৃষ্ঠা স্ক্রোল করা হয়, তখন আমি -webkit-transform: translate3d(0,0,0)একটি উপাদান সেট করি । তারপরে কিছুটা বিলম্বের পরে, আমি এই সম্পত্তিটি পুনরায় সেট করব, এটি হল-webkit-transform: none এই পদ্ধতির কাজ হবে বলে মনে হচ্ছে।

আপনাকে ধন্যবাদ, @ কলিন উইলিয়ামস আমাকে সঠিক দিকে নির্দেশ করার জন্য।

Comments

এই ইঙ্গিতটি আমাকে অনেক সাহায্য করেছিল, যেহেতু এই স্টাইলগুলি কিছু অযাচিত পার্শ্ব প্রতিক্রিয়াগুলিকে জোর দেয়, আমি সাধারণত এড়াতে চাই। সুতরাং আমি এগুলি যুক্ত করতে এবং মুছে ফেলার জন্য টাচস্টার্ট / স্পর্শকৃত ইভেন্টগুলি ব্যবহার করি। ধন্যবাদ!

— উইন্ডোওয়াকার

Answer 6

আইওএস 7 এ আইসক্রল ৪.২.৫ নিয়ে আমার একই সমস্যা ছিল। পুরো স্ক্রোল উপাদানটি সবেমাত্র অদৃশ্য হয়ে যায়। আমি translate3d(0,0,0)এখানে প্রস্তাবিত হিসাবে যোগ করার চেষ্টা করেছি , এটি সমস্যার সমাধান করেছে, তবে এটি আইসক্রল "স্ন্যাপ" প্রভাবকে অক্ষম করেছে। সমাধানটি "position:relative; z-index:1000;display:block"পুরো পাত্রে সিএসএস বৈশিষ্ট্য দেওয়ার সাথে সাথে আসে যা স্ক্রোল উপাদানটি ধারণ করে এবং শিশু উপাদানগুলিতে অনুবাদ 3 ডি দেওয়ার দরকার নেই।

Comments

অ্যান্ড্রয়েড ক্রোমে একই ধরণের সমস্যা সমাধানের জন্য আমি এই কৌশলটি ব্যবহার করেছি। উল্লম্ব স্ক্রোলিং দেখে মনে হয়েছিল যে আমি অনুবাদ 3 ডি ফিক্সটির চেয়ে আরও ভাল পারফর্ম করেছি। আমার ক্ষেত্রে <body>উপাদানটি আমি স্ক্রোলিংয়ের জন্য যা ব্যবহার করেছি এবং একটি সরল সংস্করণ কাজ করেছে:body { position: relative; z-index: 0; }

— BumbleB2na

Answer 7

সময় translate3dকাজ না perspectiveকরতে পারে , এই ক্ষেত্রে ব্যবহার করা যেতে পারে

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

Answer 8

আমি নিশ্চিত যে আমি এটিকে সমাধান করেছি:

overflow-y: auto;

(সম্ভবত overflow: auto;আপনার প্রয়োজনের উপর নির্ভর করে কেবল খুব বেশি কাজ করবে))

Comments

এটি আমার পক্ষে কিছুই করেনি যদিও গৃহীত উত্তরগুলি সম্ভবত অন্যরকম

— টনি

Answer 9

এমন কেস রয়েছে যেখানে একটি ঘূর্ণন প্রয়োগ করা হয় এবং / অথবা একটি জেড সূচক ব্যবহৃত হয়।

আবর্তন : -webkit-transformকোনও উপাদানকে ঘোরানোর একটি বিদ্যমান ঘোষণাগুলি চেহারা (যেমন -webkit-transform: rotate(-45deg)) সমস্যা সমাধান করার জন্য যথেষ্ট নাও হতে পারে । এই ক্ষেত্রে আপনি -webkit-transform: translateZ(0px) rotateZ(-45deg)একটি কৌশল হিসাবে ব্যবহার করতে পারেন ( ঘোরানো জেড মনে রাখবেন) )।

জেড সূচক : একসাথে ঘোরার সাথে আপনি একটি ধনাত্মক z-indexসম্পত্তি সংজ্ঞা দিতে পারেন z-index: 42। "রোটেশন" এর অধীনে বর্ণিত উপরের পদক্ষেপগুলি আমার ক্ষেত্রে যথেষ্ট খালি হলেও সমস্যাটি সমাধান করার পক্ষে ছিল translateZ(0px)। আমি সন্দেহ যদিও এই ক্ষেত্রে জেড সূচক হতে পারে সৃষ্ট বিলীন হয়ে যাচ্ছে এবং প্রথম স্থানে পুনরায় উপস্থিত। যে কোনও ক্ষেত্রে z-index: 42সম্পত্তি রাখা দরকার - -webkit-transform: translateZ(42px)কেবল যথেষ্ট নয়।

Answer 10

এটি বিকাশকারীদের দ্বারা সম্মুখীন একটি খুব সাধারণ সমস্যা এবং এটি মূলত Safari'sহিসাবে সংজ্ঞায়িত উপাদান পুনরুদ্ধার না করার সম্পত্তি কারণেposition : fixed ।

সুতরাং হয় অবস্থানের সম্পত্তি পরিবর্তন করুন বা অন্য উত্তরে উল্লিখিত কিছু হ্যাক প্রয়োগ করা দরকার।

Link1

Link2

Answer 11

আমার ক্ষেত্রে (একটি আইওএস ফোনগ্যাপ অ্যাপ্লিকেশন), আপেক্ষিক শিশু উপাদানগুলিতে অনুবাদ 3 ডি প্রয়োগ করা সমস্যার সমাধান করেনি। আমার স্ক্রোলযোগ্য উপাদানটির নির্দিষ্ট উচ্চতা ছিল না কারণ এটি সম্পূর্ণ অবস্থানযুক্ত ছিল এবং আমি শীর্ষ এবং নীচের অবস্থানগুলি সংজ্ঞায়িত করছি। আমার জন্য এটি কী স্থির করেছে তা ন্যূনতম উচ্চতা যুক্ত করেছে (100px)।

Answer 12

ফেন্সিবক্সের পুরানো সংস্করণটি ব্যবহার করে আমার একই সমস্যা ছিল। ভি 3 তে আপগ্রেড করা আপনার সমস্যার সমাধান করবে বা আপনি কেবল যোগ করতে পারেন:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Answer 13

আমি একটি ফ্রেমওয়ার্ক 7 এবং কর্ডোভা প্রকল্পে এই সমস্যার মুখোমুখি হয়েছি। আমি উপরের সমস্ত সমাধান চেষ্টা করেছিলাম। তারা আমার সমস্যার সমাধান করেনি।

আমার ক্ষেত্রে, আমি একই পৃষ্ঠায় অসীম ঘূর্ণন (রূপান্তর) সহ 10+ সিএসএস অ্যানিমেশন ব্যবহার করছি। আমাকে অ্যানিমেশনগুলি সরিয়ে ফেলতে হয়েছিল। কিছু ভিজ্যুয়াল বৈশিষ্ট্যের অভাবের সাথে এখন এটি ঠিক আছে।

যদি উপরের সমাধানগুলি আপনাকে সহায়তা না করে তবে আপনি কিছু অ্যানিমেশন মুছতে শুরু করতে পারেন।

Answer 14

-webkit-transform: translate3d(0, 0, 0);কৌতুক আমার জন্য কাজ করে নি। আমার ক্ষেত্রে আমি একজন পিতামাতাকে এই সেট করেছিলাম:

// parent
height: 100vh;

এতে পরিবর্তন করা হচ্ছে:

height: auto;
min-height: 100vh;

অন্য কেউ একই পরিস্থিতির মুখোমুখি হলে বিষয়টি সমাধান করুন।

Answer 15

আমার ক্ষেত্রে, সিএসএস সমস্যাটি স্থির করেনি। JQuery একটি বোতাম পুনরায় রেন্ডার ব্যবহার করার সময় আমি সমস্যাটি লক্ষ্য করেছি।

$("#myButton").html("text")

এটা চেষ্টা কর

$("#myButton").html("<span>text</span>")