ios - Strange horizontal whitespace on iPhone 4 Safari -

-

while testing website's mobile version on several devices, noticed strange behaviour.

i have scrollable content div overflow: auto, , works on tested devices, except iphone 4 on safari. other browsers , devices display correctly, iphone 5 safari.

on iphone 4 safari, when scroll end of content, lot of whitespace appears @ bottom (looks 100-200% height) , text disappears when scrolling. doesn't happen on other devices in safari, nor happen in other browsers on iphone 4.

has ever heard of such phenomenon before? have absolutely no clue causes behaviour or how fix it.

since have access limited amount of devices testing, may overlooking other devices/browsers issue occurs. if have mobile device , want test well, live site here: live site. on mobile homepage, click 1 of logo's expand content, try scrolling down. please post results in comment.

  • how looks on iphone 5 safari when scrolled down (no issue): image
  • how looks on iphone 4 safari when scrolled down (issue): image

i venture guess exposing layout quirk in mobile safari because of way hiding/showing contents of each .company element. each time change display property of element, browser must perform reflow. reflows (also called layouts) prohibitively expense on lower powered mobile devices. explain why seeing issue on iphone 4.

i myself tested on iphone 4 , iphone 3gs, both running ios 6.1.3, , able reproduce issue when expanded top or bottom .company elements, not middle one. perhaps because middle .company element contains fewer children, meaning fewer layout calculations needed.

instead of applying display: block; , display: none; each of children in .company element, recommend simplify javascript instead toggle display property on single container element. doing this, force browser perform reflow calculation once, rather each element individually changing display property.

p.s.: "other" browsers on iphone (i.e. chrome , opera) use uiwebviews. uiwebviews use modified version of nitro javascript engine (the safari version has jit compilation enabled). subtle difference might explain why issue can reproduced in safari.


Comments

Post a Comment

Popular posts from this blog

Unable to remove the www from url on https using .htaccess -

-
i want remove www site url. ie. https://www.domainname.com.au https://domainname.com.au . i have tried various .htacces code nothing work me. here present code remove www http not work https. rewriteengine on rewritebase / rewritecond %{http_host} ^www\.(.*)$ [nc] rewriterule ^/(.*)$ http://%1/$1 [r=301,l] rewritecond %{https} off rewriterule ^(.*)$ https://domainname.com.au/$1 [r=301,l] rewriterule ^code-of-conducts/(.*)/$ code-of-conducts.php?type=$1 rewriterule ^parents/post-a-job/(.*)/edit/$ parents/post-a-job.php?action=edit&id=$1 rewriterule ^parents/post-a-job/(.*)/$ parents/post-a-job.php?job_type=$1 rewriterule ^parents/open-jobs/(.*)/delete/$ parents/open-jobs.php?action=delete&id=$1 rewriterule ^parent-profile/(.*)/$ parent-profile.php?id=$1 rewriterule ^parents/job-details/(.*)$ parents/job-details.php?applied_id=$1 rewriterule ^sitterprofile/(.*)/$ sitterprofile.php?id=$1 rewriterule ^sitter/job-board/state/(.*)/page/(.*)/$ sitter/job-board.ph...
Read more