Response title
This is preview!
Move this topic
[jQuery] safari flashes hidden text from hide()
in Using jQuery
•
12 years ago
Hello. I'm relatively new to jQuery and wrote a simple script that
hides a block of text and displays a read more link that when clicked
shows the hidden text. Everything works fine except in Safari where
the hidden text is initially displayed for a second or so before being
hidden. I did some research and I did run into a few posts about
similar Safari bugs but no resolution has worked for me yet.
Here is the page:
https://216.25.8.35/
And here is the js code:
https://216.25.8.35/gsuniverse/templates/javascripts/readmore.js
Is there a quick fix I can add in to resolve this? Any advice greatly
appreciated.
Thank you.
derek
Replies(3)
Re: [jQuery] safari flashes hidden text from hide()
12 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div>This has served me well:</div><div>
</div><a href="http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content">http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content</a>
<div><br class="webkit-block-placeholder"></div><div><br class="webkit-block-placeholder"></div><div> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div>www.englishrules.com</div><div>www.learningjquery.com</div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Oct 16, 2009, at 4:53 PM, derek allard wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
Hello. I'm relatively new to jQuery and wrote a simple script that
hides a block of text and displays a read more link that when clicked
shows the hidden text. Everything works fine except in Safari where
the hidden text is initially displayed for a second or so before being
hidden. I did some research and I did run into a few posts about
similar Safari bugs but no resolution has worked for me yet.
Here is the page:
https://216.25.8.35/
And here is the js code:
https://216.25.8.35/gsuniverse/templates/javascripts/readmore.js
Is there a quick fix I can add in to resolve this? Any advice greatly
appreciated.
Thank you.
derek
</div></blockquote></div>
</body></html>
</div><a href="http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content">http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content</a>
<div><br class="webkit-block-placeholder"></div><div><br class="webkit-block-placeholder"></div><div> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div>www.englishrules.com</div><div>www.learningjquery.com</div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Oct 16, 2009, at 4:53 PM, derek allard wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
Hello. I'm relatively new to jQuery and wrote a simple script that
hides a block of text and displays a read more link that when clicked
shows the hidden text. Everything works fine except in Safari where
the hidden text is initially displayed for a second or so before being
hidden. I did some research and I did run into a few posts about
similar Safari bugs but no resolution has worked for me yet.
Here is the page:
https://216.25.8.35/
And here is the js code:
https://216.25.8.35/gsuniverse/templates/javascripts/readmore.js
Is there a quick fix I can add in to resolve this? Any advice greatly
appreciated.
Thank you.
derek
</div></blockquote></div>
</body></html>
Leave a comment on kswedberg's reply
Re: [jQuery] safari flashes hidden text from hide()
12 years ago
Thanks for the reply. I tried implementing the fix but Safari is
still flashing the hidden text. The updated files are at the same
URLs:
Here is the page:
https://216.25.8.35/
And here is the js code:
https://216.25.8.35/gsuniverse/templates/javascripts/readmore.js
Am I missing something?
derek
Leave a comment on noraflynn's reply
Re: [jQuery] safari flashes hidden text from hide()
12 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">It's all about where you put the script and style in relation to each other and in relation to other elements. Take a look at my modification:<div>
</div><div><a href="http://test.learningjquery.com/brisk.html">http://test.learningjquery.com/brisk.html</a></div><div>
</div><div>I added a one-liner before any of the stylesheets are loaded. Seems to work in Safari for me.
<div apple-content-edited="true"> <span class="Apple-style-span" style="font-size: 13px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Oct 19, 2009, at 1:58 PM, <a href="mailto:derek@gravityswitch.com">derek@gravityswitch.com</a> wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
Thanks for the reply. I tried implementing the fix but Safari is
still flashing the hidden text. The updated files are at the same
URLs:
Here is the page:
<a href="https://216.25.8.35/">https://216.25.8.35/</a>
And here is the js code:
https://216.25.8.35/gsuniverse/templates/javascripts/readmore.js
Am I missing something?
derek
</div><div><a href="http://test.learningjquery.com/brisk.html">http://test.learningjquery.com/brisk.html</a></div><div>
</div><div>I added a one-liner before any of the stylesheets are loaded. Seems to work in Safari for me.
<div apple-content-edited="true"> <span class="Apple-style-span" style="font-size: 13px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Oct 19, 2009, at 1:58 PM, <a href="mailto:derek@gravityswitch.com">derek@gravityswitch.com</a> wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
Thanks for the reply. I tried implementing the fix but Safari is
still flashing the hidden text. The updated files are at the same
URLs:
Here is the page:
<a href="https://216.25.8.35/">https://216.25.8.35/</a>
And here is the js code:
https://216.25.8.35/gsuniverse/templates/javascripts/readmore.js
Am I missing something?
derek
Leave a comment on kswedberg's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to derek.jquery's discussion