I'm using Tippyjs for a simple tooltip on hover. It works fine when no zoom is set.
I'm using Chromium and when I set the browser zoom to 150% the tooltip gets displaced.
I haven't used Tippy before but I thought it would be fairly standard for a library like this to accommodate zoom.
I've tried searching on SO and looking at the manual.
Answer was remarkably simple: add <!DOCTYPE html> at the top of the html page.
See: https://popper.js.org/docs/v2/faq/
Related
I noticed recently that every webpage I visit on iOS Chrome has an enormous blank space at the bottom of the page. The space is roughly equal to a full screen height (i.e. 100vh) and is located below all visible elements on the page. Basically I can keep scrolling the page until it's completely blank. The scrollbar also shows that the pages are much longer than their content would require.
All the pages I looked at behave fine on Android, on OSX, and even on iOS when I use Firefox or Safari. The issue seems specific to iOS Chrome. I'm not sure when this issue started but I've updated Chrome and it persists.
Is anyone else experiencing this iOS Chrome bug? I haven't found any info about it.
I created a dummy test webpage and just kept stripping it down to see what was causing the issue. Eventually I was left with a page containing only <p> tags and very minimal CSS (no positioning properties) but the extra space at page bottom still showed up. By adding a background-color to the <body> I could see that this extra space was within the <body> but there wasn't any element forcing the body to extend.
After much trial and error I discovered that if I disable Chrome's Smooth Scrolling this issue is resolved and all pages behave normally.
Solution: Load chrome://flags and set Smooth Scrolling to disable.
Seems odd that this would be necessary. Anyone know what's going on?
This is likely a Chrome bug (iPad). I also spent a lot of time debugging all the css and my components. End up event google.com it self has that mysterious white space (which is about the height of the content itself.).
6 hours gone, but it's a relieve to know it's nothing got to do with my codes.
iPhone with chrome is fine on my end
To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.
So if we apply this to the body,
body {
overflow: hidden !important;
}
this should work in your scenario!
Please make sure you have added this meta tag and the same attributes
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And check your body tag CSS, there should not be height: 100vh and check your pages again by clearing browser cache or in the private mode.
I have an SVG of the US states, and need anchor links to scroll to the state info on the page below. The anchors work fine on desktop and android, but not on IOS. The state changes to to hover color when clicked and does not link, and the hover color remains.
I found some suggestions to use xlink:href, but that is depreciated. I did try it to see if it worked and it did not. I have also tried some suggestions providing jquery code, but it did not work and also stopped the links from working on desktop.
The SVG is set up with hrefs wrapping each path like this:
<svg viewbox="0 0 959 593"> <a href="#ak"> <path id="AK" ...">
<title>Alaska</title></path></a>
(I've removed the long string of code for the path)
Here is the link to the page with the map. The anchor links work on desktop and android and not IOS:
https://www.automatictrap.com/pages/trappable-species
I have never posted here before, so I apologize if this is not enough info.
This has been resolved. Some of the anchor links on iPhone only seem to work when "a id" is used, and the links from the SVG only work when "a name" is used.
Edit: I guess this question on Stackoverflow is related to this issue.
Edit: The problem only occurs when saved to home screen not in browsing context.
Note: Everything regarding scaling and orientationchange works as expected until any input element is focused.
I have a web app with the following meta-tag for viewport-settings:
<meta name="viewport" content="user-scalable=no, width=1024">
Everything works great on orientationchange. But, whenever an input field is focused, zoom-level is messed up. I have tried a couple of different approach for solution out there, but am stuck.
This is what happens when input is focused and we trigger an orientationchange:
From Portrait to Landscape
Page is zoomed out and doesnt fill the whole viewport. If we focus on an input element when in this mode, it zooms back and looks ok in landscape mode, however if we rotate it again, it will have the same problem as in 2.
From Landscape to Portrait
Page is zoomed in and covers more than the viewport.
Things we have tried:
Meta-tag settings for viewport (initial-scale, maximum-scale, minimum-scale)
Removed viewport-tag
Handle orientation-change in JavaScript and set new viewport-settings dynamically on orientationchange
Tried to calculate scale-level (document.documentElement.clientWidth / window.innerWidth) onorientationchange
Set input-field font-size to at least 16px
I am a bit stuck here and am pretty sure I am missing something obviuos so the question is:
How do I make sure the zoom level in iOS Safari is the same post-input focus as pre-input focus?
Try this instead:
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" >
This should stop Safari doing that annoying zoom-to-focused-input thing.
I have a simple page with
<meta name="viewport" id="extViewportMeta" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
on it, with everything sized nicely to display on an iPhone.
But when I put an iframe on that page, everything inside the iFrame is not zoomable, and scales to the size of the parent page.
How can I allow zooming within the iframe only, without messing with the rest of my page?
What you are requesting is unfortunately not possible.
First off, in you 'viewport' meta tag, your "content" attribute is specifying that the user of your website CAN NOT zoom at all. That is what the 'user-scalable=no' dictates.
Also, your maximum-scale and minimum-scale is set to 1, so even if you remove the 'user-scalable=no', the zooming would disabled by the fact that you there is no scaling range for the user to zoom within.
So to enable zooming for the user you will have to remove the user-scalable=no and set different min and max scale values.
See this link to better understand the settings for the 'viewport' meta tag:
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Secondly, since your 'viewport' meta tag is set on your 'parent' page, these settings apply to anything within that page, i.e the iframe too. Whether the iframe has a different meta 'viewport' tag specifying different settings does not matter since it lives within and abides by the settings of its parent.
This is possible via jQuery. Bind the zooming and panning events to not do anything when zooming and panning outside the divs that you allow zooming and panning. Then for the divs you want to allow zooming and panning, you can use plugins like Panzoom that use "CSS3 transforms and matrix functions" to allow for zooming and panning.
This is not possible as iOS does not allow zooming - you just can scroll through your iFrame.
Is this an external site, that you own? If so, change the CSS code and add it the to viewport like in your question on the top.
Alternatively, you can load the data with PHP. You will surely find a solution for your problem - if not, feel free to ask follow-up questions.
I've tried adjusting my meta viewport tag on a jQM beforepageshow etc it simply doesn't work and I guess that's pretty obvious why. I have one page with a highcharts chart on it and I need to have nothing inside my viewport tag which normally has width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0
and that's because I want the app to zoom out when the chunky chart goes in, has anyone had any brilliant ideas on how to have one page with different viewport settings? I could link to it without AJAX and then output the right meta tag conditionally but I'd rather not do this.
I dynamically changed the meta viewport tag on a couple of my mobile websites when I want to enable zooming for an image or something else that requires the user looking at small text:
var $viewport = $('meta[name="viewport"]'),
default_viewport = $viewport.attr('content');
$(document).delegate('#page-id-one, #page-id-two', 'pageshow', function () {
//these are the pages that you want to enable zooming
$viewport.attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=5.0');
}).delegate('#page-id-one, #page-id-two', 'pagehide', function () {
$viewport.attr('content', default_viewport);
});
This code expects to be included after jQuery and the meta viewport tag. You can obviously change the contents of the viewport element as you see fit (I believe that Safari will allow a maximum-scale of 10).