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.
Related
I'm trying to use off canvas as side menu to navigate my site, it is working as intended on everything except for some elements that should be hidden but keeps going over the off canvas.
So far off canvas hide everything except forms and alert panels as if they have a Z-index higher than off canvas.
I've tryed a few things like forcibly set z-index of off canvas to 2000 but nothing seems to work
can anybody give me some tips on how to solve this issue?
thanks in advance!
https://ibb.co/RhHzBTF
My responsive web app (made with Angular Material) works fine except with input fields on iOS / Safari: when the user focuses on an input field, iOS zooms the web page. Then the zoom level remains, breaking the responsiveness of the app (because then, the viewport becomes scrollable, and for instance the toolbar is no longer sticked to the top. Also, some elements supposed to be always visible on the left and on the right, are outside of the visible area due to the zoom).
I have followed recommendations given here and there, for instance https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/ and iOS Safari zoom on input box.
An almost working approach consists to use the following in the HTML header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
However this is not good enough in my case:
setting user-scalable=0 prevents the user to zoom the view
setting maximum-scale=1 also prevents the user to zoom on Chrome/Android (even if user-scalable=yes)
the trick with the "load" event (given in the 2nd link) does not work (I suspect because this is not called when changing page in a single-page application like Angular)
the trick using font-size=16px does not work for me (like many people also report).
Would anyone have a suggestion, to:
either prevent the focus on an input field to cause a zoom
or resetting the zoom to 1 after this operation
while letting users zoom the view manually if they wish to
?
Are any of your font sizes smaller than 16px?
You might be experiencing a browser behavior that isn't related to Angular Material.
My team experienced a similar problem. We found your question as part of our work. We eventually realized that the viewport zooming behavior that we saw had nothing to do with Angular Material. That's simply what iOS does when the font on an input field is less than 16px: https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ Any input field. Angular Material has nothing to do with it.
Related: Please note that disabling viewport zoom for mobile was standard practice for about a decade after the introduction of the iPhone, but it is no longer The Way. https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/
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 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
I just discovered Fabric.js and though the documentation is a lacking a bit, it seems like it will handle everything I need for an HTML-based Dream Board tool I'm building. It appears that it doesn't play well with JQueryUI, though.
When I set any of my objects to be JQueryUI widgets, button, dialog box, etc...the control handles seem to be non responsive on the top half of my canvas items, and even on the bottom, the hit areas for resizing/rotating are greatly reduced, which makes the items hard to manipulate. Has anyone run into this? Is this a known issue? I checked github and have tried to search SO to no avail.
Thank you!
http://seismicdevelopment.com/test/no-jquery-uis.html - No JQuery UI Widgets...behaves how I'd expect.
http://seismicdevelopment.com/test/with-jquery-uis.html - Click 'Add Image', you'll get an image, but compared to the other page, you'll notice that the corners of the image aren't as interactive...you can move the image ok, but rotating and scaling is ver hit-or-miss.
The problem must be in offsets. jQueryUI is probably modifying height of those buttons, which moves canvas slightly down, comparing to how it was during initialization.
I explained this — and why it happens in Fabric — in more detail here.