Im trying to create a pinch-zoomable image using iScroll library. It works fine with small images but when I use images bigger than the screen I cannot scroll through them (I can on desktop browsers, but not on mobile!).
This link takes to a live example of this.
I finally solved it myself. Turns out the sample iScroll provides initializes the scrolling div with document.addEventListener('DOMContentLoaded', loaded, false);, but when this event is fired images might not have been loaded so their size is reported as 0.
Simply replacing it with:
window.addEventListener('load', loaded, false);
fixes it.
Related
I’m seeing an issue where text only shows up after scrolling the HTML elements out of viewport or after switching to another tab and back. The same issue also happens in WKWebView. Is there a way to prevent this issue from happening? These sections can be scroll horizontally. Not sure if that’s related, but I find it very odd that Safari doesn’t render text that’s in the viewport.
In the attached image, you can see that there are blank rows under EU, UK and US.
Any suggestion is appreciative.
--
Added another image showing HTML elements. Element with .wrapper-row is the one that has overflow-x property. This works perfectly fine on desktop including when simulating to mobile responsive size, but has an issue even with Chrome on iOS.
I found a workaround. After playing around with debugger, I believe this has to do with iOS trying to optimize what content to load. The problem is that it's incorrectly optimizing and not loading content within the initial visible viewport. This is a similar issue where sometime I have to trigger a fake scroll so that content aligns properly in Safari on iOS especially with position fixed or absolute.
To make sure content shows up. I did the following:
$('.selector').css('visibility', 'hidden');
setTimeout(function(){
$('.selector').css('visibility', 'visible');
}, 10);
This must be done outside of the main thread execution or it doesn't work. That's why I'm putting a small timeout before executing it.
I found an article that mentioned that this has to do with
-webkit-overflow-scrolling: touch
and that a solution is to add
-webkit-transform: translateZ(0px)
but that didn't work for me. You can reference that thread here just in case my solution doesn't work for you and this one does.
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
I've seen a similar question but it's quite different.
I have a div that i want scrollable. It works fine in Chrome and Firefox but doesn't work in Safari. At least it doesn't work when i load the page. I have to resize the window or zoom in/out the page for the scroll to "unlock". This only affects mouse wheel scrolling. The traditional drag scrolling works well.
The test site is here: http://dmd.esad.pt/e512/final/index.html
I solved it with $(window).load function and with help of malihu's jquery custom content scroller but i believe i could just use a simple .load
I've got a little problem with one of the sites I've developed. The problem is quiet simple, however the solution seems to be a bit harder.
The problem
The problem is that the page is being rendered as it should be on a mobile device at first, but right after the pageload is finished, the page resizes to fit the viewport. Nothing strange, this happens at almost every non-responsive website. But the strange thing is that only 75% of the available width is being used.
I already compared the based/sliced version of the design with the production version. The based version does render as it should (100% width). I've tried to spot the differences in the CSS, but I can only find a couple, I tried resetting those, but that didn't work.
Also, I've tried to disable the javascript (it's only Lightbox and 1 JqueryUI "AddClass" effect). The javascript effect has only 1 task: after pageload the header will be resized from 480px to 220px height. There are no changes being made to the width of any element on the page.
Last but not least I started Adobe Edge Inspect and took a look on the pagesource of the mobile device. But unfortunately I can't spot any element on the page that exceeds the width of the "body" tag. The only one exceeding the width is the header image, but the image is within a div (100% width) with overflow:hidden
Based and production version
If anyone would be so kind to take a look at what messes up the rendering, that would be awesome. I can't seem to find out what is causing the issue.
Based (working): http://www.nambi.nl/lefunq/
Production (rendering at 75% width on mobile): http://www.lefunq.com/_index.php
Thanks to everyone who takes the time to look into this issue.
Your problem was caused by the facepile code:
<div
class="fb-facepile"
data-href="http://www.facebook.com/pages/Le-Funq/113332665510819"
data-size="large"
data-max-rows="1"
data-width="450"
></div>
More info:
As soon as the facepile cannot be loaded due to the invalid login, the page becomes resized. As soon as I log in to facebook and the facepile is shown, the page is stretched the way it should. I just have to find out what is causing the weird scaling, because if there's no facepile, it's a 0x0 div/iframe, etc.
Solutions:
I have tried a couple of things. Onload or Onready events, and hiding or removing the facepile code. In the end, neither of these options worked. The scaling happened before the facepile was loaded completely. The final solution is a javascript workaround, checking if there's a mobile device, if so, then disable the facepile code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false ) {
document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>');
}
I found the way to detect if the browser is mobile in this answer:
What is the best way to detect a mobile device in jQuery?
I tried native browser, Firefox and Dolphin on Android 2.3.7.
Both pages render at 100% zoom, and the zoom does not change after the page is loaded completely.
I believe this problem is specific to the software of your device.
I've recently stumbled upon the TurnJS plugin to create a page turning effect. I'm working on a project right now with it to recreate a Flash flipbook that was built in the past. One of the stipulations is that it has to be shrunk or magnified to fill the browser window without scrolling. I've been experimenting with my own simple JS utilizing browser transform properties to scale the container. The scaling is working however the flip book effects don't work very well once everything has been scaled (shaky page transitions and the page corners don't work very well).
I've also been experimenting with without much luck either.
I've also implemented a chart on the second page using Flot and have also noticed that when zoomed, the mouse over are not aligned correctly. It's similar to what's happening with the page corners.
The original flash version: http://www.return-it.ca/ar2010/index.html
Without zooming: http://dev.bitpowered.ca/encorp/
Have I gone about this the wrong way? Is there an alternative to getthing this all to work, or am I SOL on this one? Thanks in advance.
The first time I go to this page, the positioning of the slideshow (developed using the JQuery cycle plugin) is all messed up, like this:
If I then refresh the page, it displays correctly, like this:
How can I ensure that this page displays correctly the first time it's viewed? The incorrect layout seems to happen more often with Chrome than with other browsers, though as you can see from the screenshots above it also happens with other browsers.
Thanks,
Don
Add width and height attributes to the images.
I'm guessing that the JavaScript activates before the image is loaded, it then does a couple quick computations to get the dimensions it needs, and locks them in place; all of this happens before the image is loaded and since there are no width or height attributes, the dimensions come out way off. On the reload, the image comes out of the browser cache so the dimensions are known when the JavaScript runs.
Your JavaScript runs when the DOM is ready, not when every single thing has been fully resolved and loaded. You could also try binding your slideshow to the load event rather than document.ready.
You see this in Chrome more than other browsers because Chrome is really fast and that magnifies the timing issue.