I am trying to scale a div in my HTML page. This div contains a lot of canvas elements and other div elements. Basically this div acts as the container for all other items in the page. With Chrome "23.0.1271.95 m" and IOS6.0 safari, the items present on the right and the bottom part of this div do not appear after scaling. If I resize the window (or change the orientation on iPad), the div scales correctly and the items begin to appear, but again disappear after a certain size.
This used to work fine with IOS 5.0 and previous chrome/safari versions. Is this a bug in latest webkit version? Also, is there any workaround to avoid this behavior?
I had got a solution for this long back but forgot to update this post. This happens because of layer compositioning done by chrome. Please add translate3d(0px, 0px, 0px); in the transform string. Adding this will create a new layer for the item and issue will be fixed. :)
Read more about layer compositioning here : http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
Related
I am having a strange problem with input in ios safari
as shown here.
The input is part of an angular app and has some basic checks for ng-length and ng-pattern. Initially as you type all the characters are showed, but if you play around with the page a bit, like tapping out, scrolling up and down, then tapping in again only the first 2 letters of what you type will show and the rest will be invisible, but the cursor will still move.
The input also uses a custom web font, but removing it did not fix the problem.
Is this a known bug and is there a workaround?
You can add
transform: translate3d(0, 0, 0);
to the input's style.
This will form a new stacking context and solve the problem.
I found my problem: an iframe being positioned absolute, hidden, from which I listen to the resize event as a solution of monitoring a div width. Removing position:absolute from it fixed it.
I am using VideoJS to show a video. It works great in all browsers on each and every system. Exception is the iPad (iOS 5 and iOS 6, both tested on Safari and Chrome). The video resizes to about 300px width.
When i delete videoJS from the page, the video is shown correctly. But i need videoJS for skinning purposes and because it makes HTML5 video work in jQuery sliders.
I tried several things:
Manually entering width and height in video.js or JS.
Adding CSS (including !important) to the videotag and even all tags (param) below.
Tried some vague techniques i found on stackoverflow. Like -webkit-transform-style: preserve-3d; in the video-tag.
Tried to play with wmode.
Nothing seems to work. Does anyone have an idea?
First, if you haven't yet, you may want to upgrade to v4.0, released at the beginning of May (2013).
With 4.0, you can see a few examples of setting the width height, that are at least working for me on my iPad:
Width/Height 100%: http://jsbin.com/uyelud/1/edit
Width 200px/900px (weird dimension for example) http://jsbin.com/ojajuc/2/edit
To walk you through the vjs code...
The width height settings are grabbed from the tag here:
https://github.com/videojs/video.js/blob/v4.0.3/src/js/player.js#L112
Removed from the video tag (because it's wrapped by a container div and made to fill the container)
https://github.com/videojs/video.js/blob/v4.0.3/src/js/player.js#L144
Applied to the container div
https://github.com/videojs/video.js/blob/v4.0.3/src/js/player.js#L180
And then handled by the UI component code
https://github.com/videojs/video.js/blob/v4.0.3/src/js/component.js#L647
If you have different results on your page, you may want to set up a reduced test case to help narrow it down.
I have a site (ils-main.attorneysonlinepreview.com) that scales properly for everything except the menu bar. It's a fixed width site and I've set the viewport meta tag appropriately. For some reason, the menu items are scaling up instead of down so they wrap instead of fitting as they should.
Anyone seen anything like this before?
The issue is only on the iPad, not on 'real' computers. The scaling issue is there on Chrome on the iPad as well. The menu should have 5 items, but the last two wrap and because it's white lettering on white back ground, you might not have noticed it.
I have a form that appears in a FancyBox iframe modal. On iOS 5 (specifically on an iPhone - does not occur on iPad) when I touch the submit button it activates a <select> that appears about 50 pixels above the submit button and I'm then presented with the <select> options at the bottom of the screen.
I've zoomed in as much as possible to verify that I'm not touching the select – I am indeed clicking on the submit button and it highlights itself as expected, but the form of course does not submit and I get the options to pick from.
Has anyone experienced a bug like this in iOS 5? I can't pin this down to anything else – there is some javascript that would normally run to process the form on submit click but it's not being activated at all and it has no effect on the form itself, the <select>, etc. I have seen several odd things with iframes on iOS and wonder if there is a potential correlation.
You might have the connections for your actions going to different buttons than the outlets. That would explain why the right thing would happen (Action is OK) but updating the Frame Rect would get messed up (Outlet is on the wrong button).
iframes on ios don't behave like normal iframes in every other browser (including desktop safari).
ios safari renders them at the full height of the page inside the iframe.
To get them to scroll like a normal iframe of fixed height you have to put them in a div and set the divs overflow to auto or scroll. I'm guessing your modal overlay is already doing that.
But even a plain in-page iframe with no special positioning (other than using a parent div to crop its height and make it scrollable) will often only have the submit button work 1 time if the submit buttons original rendered location was below the fold of the parent div.
So the first submission will work, but if the form comes back with missing required field errors you can't hit the submit button again.
Further research on my old ipad shows that if the submit button is down far enough it won't even work that first time.
The bug is present in safari for ios 5.1.1 and also ios 8 !!!
I can use an onclick javascript function on any element in the iframe that is not an input type=submit to force the form to form.submit().
But specifically about the iphone issue what was probably happening was that the OS was trying to zoom in to the form field so the use could clearly see what they were typing. The fix for that might be to declare a font-size of at least 16px on input elements. That way the OS knows the text in the field is already at a fairly readable size and won't try to zoom in. Zooming in to the contents of an iframe within an absolutely positioned modal overlay is super buggy even in ios 8.
Must use the JSFiddle on iOS to see issue :)
Developing an iOS web app, and have multi panels which are translated -480px on click (by adding a class with JQuery).
When I use -webkit-transform: translate: (480px,0); on the first navigation button, everything is fine except the input[type=range] becomes unresponsive.
I originally had this: http://jsfiddle.net/b4ung/2/
And later I added -webkit-perspective: 1; to the body. This fixed on Safari but not on iOS: http://jsfiddle.net/RLywz/2/embedded/result/
Can someone please tell me how to get the range function to work on iOS, and why it doesn't register after the translation?
Just for further note, if I change the transform to "left: -480px" the range works, but then becomes blocky when animating.
Any light would be tops, as its quite annoying (and if its a bug can someone file it 'cause I'm not a developer)
Edited to make the problem more clear, and show updated JSFiddle
I had the same problem, and I was able to hack it by setting the panel's css property to translate(0,0) when it needs to have the range working.
In order to have the animation/position right, I wrapped the element with a div and set the x position as needed and shifted the panel's translate property when the range doesn't need to be active. Hope it works in your structure.