I've run into an issue with CSS sprites used for a sidebar widget in our site. On the iPad with iOS 7.1, the sprites are all pushed down too far.
I have tried several other suggestions with no noticeable changes:
Specifying a background-size to prevent scaling (not a scaling issue)
Using background-clip and -webkit-background-clip to clip to padding box
Setting the viewport to minimum-scale=1.0, maximum-scale=1.0, as well as initial scale, disabling user scaling, etc.
You can see the icons on the following website:
http://eugenedining.com/featured-restaurants/
You'll notice it is only a vertical alignment issue. The icons are all in the right place horizontally. When you click on an icon, the active state (white on orange) does not shift around, althouhg it is still cut off. It is not a sizing issue.
I think the <span> element is actuall being pushed down by something.
Any ideas?
Preview:
So I guess there is a mysterious padding / linebreak issue of some kind that appears inside the <a> and before the nested <span> element.
Switching the span to absolute positioning has fixed the issue, but I'm still clueless where the extra space comes from.
Luckily most of my structure is done to the <a> element, so this was pretty straightforward to implement.
.tag-list li.tag-item a {
position: relative;
}
.tag-list li.tag-item a span {
position: absolute;
top: 0px;
left: 0px;
}
Related
We are developing a slightly bigger solution using angular - and currently cordova for our native builds (we will change that soon).
In our App we have multiple Input fields. When focused the complete site automatically gets shiftet towards top to display the input field properly - that's the standard behavior of iOS/Safari as far as i am aware of.
Our Problem is that, sometimes, when we enter the input field the page gets shifted a bit too much towards the top. (the amount of shifting is completely random but always relatively small)
So if we leave the input the complete html-tag is slightly offset and there is a space between the bottom of the display and the html-tag itself.
The html-tag itself keeps it size, so its leaving the screen on the top-end.
I have added a red border to the html-tag to hopefully make it more clear:
how it should look (red border at the top is visible)
shiftet html bottom 1 (red border at the top is not visible anymore)
shiftet html bottom 2 (red border at the top is not visible anymore)
Basic html structure
<html>
<head>
...
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no">
...
</head>
<body>
<app-root>
<home-component>...</home-component>
</app-root>
</body>
</html>
css:
html {
height: 100%;
float: left;
display: block;
border: 2px solid red;
}
body, app-root {
display: block;
}
home-component {
display: flex;
flex-direction: column;
height: 100%;
height: -webkit-fill-available;
}
If I add a margin-top to the HTML tag, I can slide it down far enough. If I set the margin-top to a negative number, the HTML tag will align itself correctly again.
I have tried several things now including absolut positioning, playing around with vh, px, %, etc. or the reworking of the whole html/css structure. Also i checked the meta viewport (see html snippet).
Perhaps I should add that we don't move or animate any elements via js or css and that scrolling is only allowed in certain components in our solution
On the android devices or as a pwa the app works flawless. So i think it must have something todo with the virtual keyboard of safari/ios.
This problem is driving me nuts ... i hope someone can help me or direct me into the right direction.
So this is my first question here on stackoverflow, so please dont tear me apart ;)
I'm encountering a strange issue only on Safari iOs 13. I have an element which has horizontal scroll (native scroll, overflow-x: auto).
On iOs 13, when I scroll this area, when an element outside the viewport comes in the viewport, first it's hidden, then flickers and becomes visible.
Here's a screencast of this issue: https://imgur.com/a/Y2Lz2GH
You can see it live: https://www.thebackpackerz.com/agenda/concerts-rap-paris/
My guess is that's related to iOs 13 new features :
Added support for one-finger accelerated scrolling to all frames and
overflow:scroll elements eliminating the need to
set-webkit-overflow-scrolling: touch.
Changed the default behavior on iPad for wide web pages with
responsive meta-tags that require horizontal scrolling. Pages are
scaled to prevent horizontal scrolling and any text is resized to
preserve legibility.
But well, right now, it's like a bug to me. Any idea to patch this?
I also had the same issue and after trying different solutions i came up with this.
.bottom-nav-wrapper {
position: fixed;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
And in this wrapper you can place your cards/elements for horizontal scrolling.
After updating my iPhone 8 Plus to iOS 13, i noticed a weird behavior with the new volume HUD on my website. The new volume HUD won't disappear after interacting with the volume buttons. It shrinks to a simple bar, but never disappears completely. only happens in some webpages where i have a fixed view, no vertical scrolling. Can it be related to a CSS rule? As soon as i hit "back", or go to another page that has the vertical scroll enabled, the volume HUD disappears as it normally should. Anyone else had this issue? If you did, what caused it and how did you solve it? It's terribly annoying as the new position of the volume HUD covers a bunch of controls in those webpages that i noticed the issue in, so need to find a solution to fix this aswell as keep things functional for iOS12 or lower users.
another issue i noticed with iframes, those that were supposed to be scrollable in this format:
<div style="overflow-x:scroll">
<iframe >
...
<video></video>
</iframe>
</div>
in ios12, the iframe used to be the same width as the video it contained, let's say 1200px width, and on mobile i was able to scroll the iframe horizontally, and focus on the part i wanted. in ios13, the width of the iframe is that of the device, meaning i cannot scroll it horizontally anymore.
I have a temoporary fix in place, using jQuery i get the video's width and apply it to the iframe, but this causes new issues and i want to go back to the way it was. Why is the iframe different in ios13 than it was in ios12?
Thanks
Already trying to remove CSS rules one by one and see which causes this, but no luck so far. looking at removing overflow:hidden rules aswell as -webkit-overflow-scrolling rules to see if this is related, only ones i can think of that might have anything to do with it. Or maybe a meta tag? ? But this one is added on every webpage on my website, so not it.
Expected result: normal behavior, volume HUD disappearing after interacting with it anywhere.
iframe scrollable without requiring jQuery to set a fixed width to the iframe
EDIT:
the block of code that causes the issue. removing the block will clear out the issue. so my guess is still something regarding css rules.
<div id="webcam" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;position: relative; background-color: black;">
<video id="h5live-webcam" type="application/vnd.apple.mpegURL" playsinline="true" src="https://stream01.****.com:443/h5live/http/playlist.m3u8?url=rtmp%3A%2F%2Fwowza02.****.com%aaabad&stream=1000000.mp4%3FcSessionId%3DguestKey&random=142989" style="width:initial; margin:0px; transform:none; height:100%; width:initial;"></video>
<div id="middleView-webcam" style="width: 83px; height: 83px; position: absolute; left: 50%; top: 50%; margin-right: -50%; transform: translate(-50%, -50%); z-index: 1000;">
<canvas id="loadingSign-webcam" style="z-index: 1001;"></canvas>
</div>
</div>
UPDATE 2: issue is related to NanoPlayer and playback options (muted, automute etc.) . haven't solved yet, but narrowed it down.
iOS 13 changed the behavior of iframes. They used to not scroll and expand to fit content (flattening). They now work like all other browsers. Applications which worked around the iOS iframe scrolling issue with the scrolling DIV may be impacted. Trying to find out if there is a way to revert this DISABLING FLATTENING OF FRAMES via configuration so that iOS 13 can behave like pre-iOS 13. It is a huge message.
See the release notes for iOS 13 about removed features:
Disabled frame flattening on iOS. Frames now render in the same way as
a desktop browser.
Bug information listed in bugzilla.
I'm trying to get momentum scrolling to work, by setting a class called momentum-scrolling on a top level div that wraps the part of the content that scrolls. The class is defined as:
.momentum-scrolling
{
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Yet it is not working (testing in simulator on both iOS 7.1 and 8.1).
Here is a link to view the example on jsbin directly (suitable for viewing in a mobile device for testing):
http://jsbin.com/cewobokisi/1/
Here's the link to the editable stuff on jsbin:
http://jsbin.com/cewobokisi/1/edit?html,css,output
(Note that the CSS shown includes minified bootstrap, and a few other things. I left this like this because while it's a bit harder to edit, I was trying to reproduce the issue exactly as we have it in our site now, in case anything we're doing is causing the issue.)
Update
I've got a modified version here (http://jsbin.com/sibofucexe/1) where I've modified the .momentum-scrolling style to include position: fixed, height/width 100% (based on some other posts I found with momentum scrolling examples):
.momentum-scrolling
{
position: fixed;
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
And that does now allow for inertial/momentum scrolling to work!
However, now I lose the ability to tap on the top bar to scroll the window to the top, and occasionally I cannot scroll up or down (typically when the DOM is being manipulated by JavaScript, due to an ajax hit to add more data).
Any ideas on these issues? Am I doing this wrong?
I know this is a late reply, but for the sake of future Googlers:
According to CSS Tricks, you must use overflow: scroll rather than overflow: auto. That may cause your first example to work.
Imagine the following setup:
<meta name="viewport" content="user-scalable=yes, width=640" />
Default CSS:
body { width: 100%; }
CSS change on some element (let's call it button-X) click:
body {
margin: 0 0 0 -webkit-calc(100% - 100px);
min-width: 640px;
overflow-x: hidden;
}
What does this do in desktop browser?
It shifts entire body almost 100% to the right. Horizontal scrollbar doesn't appear. You only see left part (100px) of the body positioned to the very right of your screen.
What does this do in iPhone 4S iOS 6.0.1?
There are two behaviors actually:
INCORRECT: If you just run Safari and click button-X it will start displaying your website at like 1200px instead of 640px.... shifted body will make entire viewport have 630px of blank space + body width = ~1200px. Even if body has position: absolute; or position: fixed; which in theory should allow positioning elements outside viewport but it doesn't. iOS makes viewport so large that your elements that are supposed to be off the screen are on the screen.
CORRECT: I wouldn't ask this question because maybe that's how it works and it can't be changed BUT there is fix for that so I assume it's a bug of iOS. If I run Safari and I tap it with 2 fingers and move them together (like to zoom out) and then click button-X it works perfectly. This action of tapping with two fingers doesn't change anything to viewport. Since viewport is set to 640px it will remain 640px after releasing fingers so literary nothing changes... but it starts working perfectly fine after this simple action.
The question is - how to perform this action (2) programmatically? I've tried:
jQuery(window).trigger('resize');
-webkit-transform-origin: 0px 0px; -webkit-transform: scale3d(1,1,1); zoom: 1;
How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
Interesting: it will make viewport ~1200px even if you set user-scalable: no
This didn't change anything. Basically I want absolutely positioned elements (or with overflow: hidden;) to be off the viewport like in desktop browsers.
Have you tried initial-scale=1, maximum-scale=1, user-scalable=no? Also, I think you are trying to fix it backwards. What is exactly the thing you want to do? Not the behaviour of the viewport or DOM elements, but the result website/webapp.
Anyway - in general, viewport is body. It's weird to make the body wider than the viewport and expect the body to clip itself. Try setting the body at a fixed width (not minimum, because this way it can get as much wide as it wants), and putting a div container inside the body, and apply your margin CSS change to the div, not the body - body should have the width set and overflow-x:hidden.