I found a wired issue in Mobile Safari as demo http://mocheng.github.com/demo/translate3d.html
There is one page translate3d_iframe.html inside translate.html as iframe. Elements in translate3d_iframe.html has style -webkit-transform: translate3d(0, 0, 0) to force 3d acceleration.
The interesting result is that the 3D-ed element would always displayed on top of other elements event it has lower z-index.
What is more interesting: the 3D-ed element is just displayed to be on top of other elements. You can still tap on the menu item "hidden by" 3D-ed element (alert message is shown on tap).
This can only be reproduced in Mobile Safari.
Is there anyway to workaround it? I just felt that web developers have to know how iOS browser works to attack such type of issues.
Related
I am working on a chrome extension that would display an overlay over any tabs the user is working on. I need it to operate within the full viewport.
I'm using vanilla javascript and content script to inject a full viewport-size div (to the body since I want it to be used on any website) and then append my template to the div I created and injecting them with Angular. It works very well.
The Problem
However, this overlay is somewhat blocking since the div I create has to have a z-index of at least 0 to be seen. Let's imagine you perform a google search, you will be able to search since the google search bar has z-index > 0 but you won't be able able to click on the results ... The problem appears in pretty much any website.
Now I tried to play with z-index: I apply z-index = -1 so I won't see the main overlay div but the problem with that is that the content I append to it seems to inherit the z-index -1 no matter what so I never see my template!
I've followed quite some topics here but I didn't find an answer to my problem!
The Question at last ...!
How do I create a non-blocking chrome overlay ? :)
Remember: I need to be able to interact with the overlay at any given moment, not simply when I click on the icon related with the BrowserAction!
The trick is simply to add the css property
pointer-events: none;
to the main div and
pointer-events: auto;
to the template
I need to make a classic full screen landing page with a h1 title, a h2 sub-title and a call-to-action button to slide the content to the first div of the website. I really hope you can help me because the website should go online soon and this is the one thing that's stopping me from saying it's finished, I'll try to tell you everything so you have a better understanding on what's going on.
Here's my Fiddle: jsfiddle.net/daghene/szp7yf7h/1/
And this is an online version of the real page with the first bit of
content below it http://andreacordioli.com/macwip2
I'm using Skeleton Framework and the div containing the fullscreen image is outside the .container who's wrapping the grid, while the h1, h2 and button are inside it. Right now I have two problems:
for some reason, only in this part of the website, text bigger than a certain point exceeds the page width making the website scrollable horizontally under a certain point
I made it so the text gets smaller under the 550px mark which is where the Skeleton grid comes into play. I tested it on my Motorola Moto X which has around 1280x720 resolution and noticed if I check the website in landscape it doesn't trigger the smaller resolution text propieties and the text exceeds the width of the windo again: this happens on iPhones in Chrome tester too
What I wonder right now is: as of today, what's the best practise to make a 100% responsive landing page with such simple content that is always centered, works on all possible resolutions and device orientations withou exceeding borders and has the text always at a decent size never being too big?
For instance, the text exceeding the width is 8rem which equals to 80px in Skeleton. Here's the page I'm trying to achieve, which I'll need to serve a different image for on mobile when aspect ratio is X:Y where Y gets bigger than X somehow:
If you try it it kinda works and I even tested it on my old, first Samsung Galaxy Tab which has the super old Android 2 or 3 browser which gives me more problems than IE but actually centers everything correctly with this code...but the main issue is that the text isn't scaling properly and if the window is too narrow it either disappears on the right, making the window scrollable on the right and part of the big title unreadable, or if it gets too small(say my 1280x720 4,7" Moto X) the call to action button disappears since the screen window is too short and there's the browser bar too. I put overflow: hidden to this windows to be sure there's no horizontal scroll but the real problem is not the scroll, it's the text exceeding the div instead of getting smaller.
LAST NOTES!
If you check the css there's a "-1rem margin" on the H1 because as I
said for some reason in this specific section the H1, and just that,
doesn't center. The H2 and Button are centered, the H1 is not and
only here...don't get why.
If you try to make the window horizontally smaller you can see the text touches the window on the right side first(both in the Fiddle and in the other link where there's no html and body margins), still can't get why and I feel that's what's preventing the text to stay centered while getting smaller.
It looks to me that some of the problems you describe are because at viewport 550px wide, your h1 font jumps in size from 5rem to 8rem. But at this viewport size there isn't enough horizontal space to hold your h1 text and so it exceeds the width of its parent div, and hence appears to be off-centre.
I think a solution would be to tweak your CSS in http://andreacordioli.com/macwip2/css/includes.css starting around line 1047 to something like the following:
#media (max-width: 625px) {
.bigImage h1 {
font-size: 5rem;
}
...
}
Hope this helps!
I'm trying to use CSS with 'position: fixed' to create a dialog box. When I 'open' the dialog box in chrome I can see the 'dialogbox' in the dropdown where the markup of the fixed element is, but it is not rendered in the way I expect.
Chrome shows that the dialog is there and the position is correct, but the rendering is wrong.
I'm expecting fixed elements to be drawn relative to the viewport regardless of where they are in the DOM, and the z-index is larger than all other elements. What am I doing wrong?
I have an element that is set to display none on page load. When you select a number from a select list the element is shown with jQuery. This works fine in all browsers except in IE7.
In IE7 everything is laid out correctly if I disable JavaScript. However with js turned on (and then the element shown via the select list) the legend appears in the wrong place. If with the developer tools I change the width of the fieldset and change it back to the original value, then it displays correctly.
So it seems like its some sort of rendering issue for hidden elements in IE7. If I add this CSS it messes my site but it fixed this particular issue.
* {
position: relative !important;
}
Adding a class which is hidden with css rather than adding display none as an inline style fixed this.
I am discovering css and I found a problem I can't fix.
My logo has a different position in IE7 than in other browsers like IE8, FF and chrome.
This is IE7:
http://www.prestashop.com/?ACT=29&fid=9&aid=16515_Awto8qE0tmhdhVFv8yWF&board_id=1
While IE8 and others show it correct, between the black and grey borders.
The css code:
#logo {
float:left;
margin-top:-45px;
margin-left:20px;
How can I fix this?
Different browsers have different default values for page elements. You should set all the elements to a base value. the best way to do this is using a CSS reset.
"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."
Check this tutorial out:
http://meyerweb.com/eric/tools/css/reset/
All the best.