Situation: I've got an HTML page with multiple canvas elements on it. The canvas elements stretch the entire page (both vertically and horizontally), and there's no spacing between them.
Now I've got a problem on mobile devices, because if I touch-scroll over these canvas elements, the browser does not recognise this as a regular scroll event, leaving me unable to scroll the viewport at all.
Because the HTML page is taller than my viewport, I still want to be able to scroll to the bottom of the page, which I've now disabled. Any ideas to mitigate this effect are more than welcome.
You can see a demo of what I'm talking about # http://www.manuals.epaper-system.com/Tutorials/BXSLT4IndV6_220440/BXen/2014/20141115/BXEPen_v6_20141115_V220440.htm
Click on an article, then zoom in (to make the page taller than your viewport), close the article and try to scroll the page on your mobile browser while pinching on the PDF contents.
Related
The problem
I'm having trouble getting multiple elements to fit on screen without scroll bars and while maintaining aspect ratio. I have a video element and a div (control bar). I want the video element to resize instead of hiding/covering the control bar and adding scroll bars.
My research
Using the CSS provided by this post I'm able to get my video element to adjust properly with the window size. However, the control bar will get hidden if the vertical height is reduced enough, exposing a scroll bar.
Moving the aspectwrapper class to the div that parents both elements seems to break things.
Adding aspectwrapper to both the video element and control bar prevents the control bar from filling 100% width but doesn't stop it from being hidden.
See my JSFiddle of my progress so far. Resize the display window down to replicate my issue.
I found very similar post here, with good visuals. It unfortunately didn't get any solutions though.
I have an iFrame within a page and it has a chat-icon that should stick to the bottom of the screen (but of course it will have to remain in the iFrame when scrolled out of the view).
The iFrame stretches outside the main viewport and as it seems, the iFrame is only aware of the bottom of its own document/viewport which in my example resides below the bottom of the browser window. It is not aware of the bottom of the parent page which in this case is the bottom of the browser window..
The question is simply, is there a way to get this to work with CSS only from within the iFrame? I do have the option to post messages with i.e. page height down to the iFrame. I am trying to avoid Javascript solution to position the icon manually on scroll event, due to its flickeryness...
I'm unaware of any way to do this in a CSS only fashion as the iframe is going to be completely unaware of the larger page (and that page's viewport) because it's own viewport is the bounds of the iframe itself, and the screen.
I think the only way to do this is with javascript using postMessage to pass the viewport dimensions down into the iframe where you can adjust the bottom value. To avoid flickering, add a short transition to the icon CSS so it slides into the correct place.
I'm implementing a fixed vertical menu. It works great on desktop and looks great on mobile devices (IOS, Android)... as long as you don't zoom in on the page. When you zoom on a mobile device, the fixed element begins covering the other page content (as it should since it's fixed to a certain place on the viewport).
But what I'm looking for is a navigation bar that's only fixed vertically. So if you zoom in and scroll horizontally the navigation bar doesn't cover the content. Is there a way to do this?
This is a common problem and as far as I know there is no way to fix only vertically using merely CSS. You have the choice between either:
Disable zooming using viewport meta tags (but this can be bad for accessibility).
Control the menu position using javascript on mobile devices. For instance by instead of using a fixed position, give it an absolute position and on every window.scroll event, update the top position of the menu. This however will result in unpleasant results on devices that aren't state of the art (so on most devices you will see the position update with constant shocks). Second issue will be the smooth scrolling on Apple devices which prevents you from getting any information about document scroll position during 'smooth scroll'. So you would then also have to disable the smooth scrolling (possible with a CSS line on the body) but this also gives the user a negative experience.
This is why the menu is usually turned into a hamburger icon and only appear once the hamburger icon is pressed. The little hamburger icon will not be so annoying in the top left corner during horizontal scroll, as it is quite small.
I have a page with a fixed div which is displayed at bottom of screen. When I put that page in iframe it has no issues while viewing in desktop
On desktop the yellow bar is coming at bottom without any issues:
https://jsfiddle.net/x1p4bf7j/12/
<iframe id="if1" src="https://fiddle.jshell.net/8ghsm1La/show/light/" />
but on iPad it doesn't the text just doesn't fit inside iframe. Below is the text how it is displayed in iPad
As you can see in the image there is no sticky footer coming. I want that to be at the bottom of my iPad.
The issue is how mobile safari renders iframes. It doesn't respect a height attribute, preferring to set the height of your iframe based on the height of your content. Personally, it makes sense when you think about how earlier versions of IOS handled overflowed scrolling (two finger scrolling) - Imagine an iframe that ALSO contained a scrollable element!
(A related stackoverflow here: iframe size with CSS on iOS)
Anyway, your "fixed" footer IS fixed - just at the bottom of a very large iframe.
I have a problem with my website, i have created a css menu that is a dropdown menu on some elements. I use an image as a full cover. When i put my mouse over an element of the dropdown menu, the cover changes position. My test site is http://unibenefits.gr/test2/tripoli .
When you set a background-image to cover, it will fill the entirety of the element (usually HTML or Body) that you assign it to. This will change if the size of the element changes - e.g. if you resize your browser window, the background-image will resize to fit it.
Something in your dropdown menu is causing your site design to overflow horizontally (i.e. the design changes slightly on certain rollovers, so the design goes very slightly wider than the browser window). This, in turn, creates a horizontal scrollbar. The horizontal scrollbar takes up room in your browser window, effectivley resizing it. This is why your cover background-image is resizing - it's not actually changing position, though they look similar.
If you can identify what in your menu is causing the horizontal scrollbar to appear, you'll fix the problem.