I ran across a very strange behavior when injecting a container with the css attribute -webkit-overflow-scrolling dynamically and thought I'd ask for your thoughts/ideas.
Through AJAX I'm querying additional data and once processed add it to the DOM. However, when accessing the page the very first time (cleared cache) the container adds fine, but I cannot scroll! Refreshing the page through mobile safari reloads everything and suddenly the container scrolls...
There's no additional JS involved so I'm wondering why it would scroll the second time the page is loaded... Anyone have a take on why this could be?
Thanks, guys!
probably because the page has not adjusted to the new content, you could just add overflow-y: scroll to the element which you will be adding content to, so that it always scrolls. Or add this when you add the new content.
Related
Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:
#media screen {
html, body {
width: 100%;
overflow-x: hidden;
}...
But no effect, error still persist.
Test Live URL tool don't show any error, all pages mobile friendly.
Any idea how to fix this? I'm sure this is google bug, but how to avoid it?
I have remove all "position: absolute" from classes, doesn't matter if absolute element fits on small screen fine. But that classes were assigned to hidden content what fit fine on smallest smartphone screen, also most of them were not connected to any page element, because elements were password protected.
I found a way to quicker render pages, not waiting long time after clicking "request indexing". First create new page, using site template and css, text on page should be unique(Lorem Ipsum Generator help with that). Second, create one more sitemap file with only one url pointing to new file, submit it and in a 5 minutes you'll have crawled and indexed page. That helps a lot while searching a bug in template or css.
Edit:
Since removing absolute position broke UI design, I set it back with javascript.
Check in real devices instead of emulator. Delete every section and check iteratively, you will understand which one is causing horizontal scroll
I want to get the similar behavior for my header in HTML page as in ios google chrome's header: when user start to scroll to the top (from any place of the page) of the page header appears as if it was sitting just above. And when user is scrolling to the bottom - the header just keeps it's position and slides up.
I added a 'touchmove' event to capture scroll coordinates, and can log it in some div just to check if it is working and seems like it's working fine, except for header's position is not updating while scrolling. Once scroll has stopped header's position updated as expected.
So my question: is it possible to update an element while user is scrolling?
I would prefer to not change to scrolling the content of the element (instead of scrolling the page itself).
Seems like no workaround, from Jquery.mobile page:
Triggers when a scroll begins. Note that iOS devices freeze DOM
manipulation during scroll, queuing them to apply when the scroll
finishes. We're currently investigating ways to allow DOM
manipulations to apply before a scroll starts.
Do you by any chance have some code we can look at?
Although, if you're using jQuery, check out this plugin: http://wicky.nillia.ms/headroom.js/
It provides the functionality you are looking for.
I have a page in asp.net that does not render correctly in Chrome: when a certain block becomes smaller (because of the number of the elements of a grid on the page) the background does not get entirely refreshed, it leaves a part fom the previous rendering, until changing the tab browser and returning back. Same thing happens when going through blocks that become visible and then hidden. Is there a way to force a re-render of the background (I'm using UpdatePanel and Chrome v 24.0.1)? Or has anyone seen this behaviour and managed to solve this (could it be some z-index css problem)? Please help...
After a while of researching the asp code, the properties of the grid, the css, the foums on chrome bugs, it seems that a css property modification of the div underneath the grid did the trick, I had to change overflow: visible to overflow: hidden.
I have created a page that has similar functionality to that of the DiggBar (i.e. a header of specified height and an iframe below filling the rest of the page).
I had this working a while back with desired results, but all of a sudden the height of the iframe has gone from 100% of the remaining page height to only 44.8px. The catch is that this is only occurring in one browser — Firefox on Ubuntu.
I thought that this should be happening in all other browsers, but it's not. It displays correctly in IE, FF, & Chrome on Windows and Chrome on Ubuntu.
Finally, using Firebug, I have selected inspect element to try to determine what's going on, but it only tells me that my height is defined to be 100%, but that it is computed to be only 44.8px.
I am looking for some guidance as to how best to debug this issue because I have completely run out of ideas. I didn't think that it would be necessary to post all of the code that produces this problem, but if any is absolutely needed, just ask.
Thanks.
Unfortunately the Cascading part of the Cascading Style Sheets threw me off. I had another (let's call it 'hidden') reference to the parent of the iframe which caused the weird height calculation issue.
Funny that this only happened in my Ubuntu version of Firefox, though.
If you have a complicated layout structure, setting height of all divs to 100% may break the page layout. In this case I recommend using javascript to set the height of iframe to 100%. In my case I used JQuery, but I believe pure javascript DOM functions should also work. I set the height of iframe equal to parent div height:
$('#doc-preview iframe').height($('#doc-preview').height());
Here the doc-preview is an id of iframe's parent div.
Make sure to run this script after the page has been loaded.
I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.
There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn't have this issue I could do that too.
Thanks!
When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.
// detach iframe
_frame = $(_viewerFrame).detach();
function reattach(frame) {
// append it back to the div it was in (reattaching essentially)
$(_viewerDiv).append(frame);
setButtonStates();
setViewerState();
}
function onOk() {
... // other code
reattach(_frame);
}
function onCancel() {
... // other code
reattach(_frame);
}
// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...
Hope that helps...
This is likely because PDFs are displayed in a plugin, rather than natively in the web browser. CSS will not have an effect on this, because CSS only applies to content rendered in the web browser. Google does have a system that converts PDFs to HTML for display in browsers, at which point there would be no z-index issues, but some formatting may be lost in the process, and of course it is no longer a PDF document. Unless there is some way to tell the PDF plugin itself to lower its z-index (and consider that not all users will be using the Adobe plugin, some may use Foxit or other programs) you may be out of luck.
Try position:relative and z-index adjustment to get it in front of the iframe.
You're showing a pdf in an iframe? I'm guessing it has some sort of flash viewer? If so, then make sure you set the wmode of the flash embed code appropriately.
http://kb2.adobe.com/cps/155/tn_15523.html