On this site you can read: "[...] if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want."
Is there another solution to emulate Webkit´s behaviour?
Related
Question
I want to eliminate the sliding animation when a select menu option is chosen.
Background
All of these are recorded on OS X Yosemite:
Chrome (no sliding animation on selecting an option)
Safari (has sliding animation on selecting an option)
Firefox (entirely different style and behavior)
What is causing the differing browser behavior (style, selection animation) when a select menu option is chosen?
It doesn't appear to be the user agent stylesheet of the browser—I tried overriding Safari's user agent stylesheet by using Chrome's default user agent stylesheet from the Chromium source, but this did not change Safari's behavior.
Problem is these browser are of different vendor and they implement every element differently and CSS as well you need to add CSS vender prefix to apply CSS Style sheet. But not every browser support all CSS property. You can get list of supported property from here.
That's why every browser show different behavior.
I have a page, all styles are authored using em unit for sizing. I am facing a strange issue in IE9.
I have a requirement to have custom zoom buttons. By clicking on that button, I am increasing the font-size of body. Eg from 1em to 2em and all child elements gets the higher inheritance and zoom is applied.
But whenever zoom is applied, texts are hidden in SELECT and INPUT fields. This gets fixed as soon as you interact with that element - that is as soon as you focus the cursor on that element, everything looks okay.
See this picture:
What could be the issue? How I might fix it?
Please note, I tried making a JS fiddle, but no success on reproducing the issue. A clone of what I have in real app can be seen here: http://shekhardesigner.github.io/IE9-EM-Sizing-ZOOM-Issue/
Make sure you have correct Standard Doctype Rendering, also you could add
"<meta http-equiv="X-UA-Compatible" content="IE=Edge" />" inside the head tag. It helps to display the webpage in edge mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
I'm aware that an iframe can't inherit the css styles of the "main" webpage, but if so I am confused. I have a main page whose background is plain black, with white text. The iframe doesn't have a background colour specified and yet it is black, the same as the main page. However, other css properties in the main page have to be defined separately for the iframe if I want them to be used. Why is this?
If you do not set the background of an HTML document (by setting it on its html element or its body element), the browser default will be used, and it can be expected to be the initial value, transparent.
This means that for a page embedded in another page with the iframe element, you can expect the background of the embedding page to shine through.
You can use Developer Tools to figure out where the black background is coming from. (It's built into the browser.)
If you are using IE or Chrome, you can just press F12 on your keyboard and then use the element selector (top left) to select the IFrame. On the left you will then find all the CSS styles that are applied on that IFrame.
This will give you an insight on what's happening and also give you a new priceless tool to debug in the browser.
Note: If you use firefox, you will need to install firebug.
This can also come useful.
Precedence rules in CSS (1 is most Precedent):
User defined style
Embedded or inline style sheet
Internal style sheet
External style sheet
Browser default style
This may be Firefox specific. See here and here.
When I "fullscreen" an element (let's say a div), I can't get anything other elements to appear (while in fullscreen mode). Why is that happening? How can I accomplish this?
Related: Is there a way to overlay a <canvas> over a fullscreen HTML5 <video>?
It seems that browsers (Chrome 28, Firefox 23) set the z-index of fullscreened elements to 2147483647 (the largest 32-bit signed number). According to tests, setting the z-index of other elements to the same z-index will cause them to show, but the z-index of the fullscreened element can not be changed (it can, but the browser just ignores the value — even with !important).
Maybe the only reference I could find to this:
https://github.com/WebKit/webkit/blob/master/LayoutTests/fullscreen/full-screen-zIndex.html
Also, in Chrome dev tools:
So either set elements to the maximum z-index, or, the better solution would be to just create a container element, make it so that all elements you want to display are children of the container element, and fullscreen it.
I have a popup window which appears after clicking on a button. I don't want the pop up window though to be resizeable. I tried using in css resize:none and resizable:none but this does not work for all browsers.
Is there a css element that can be used so that pop window can not resizable in all browsers, or is there a lot of different ressizeable related css elements so that I can use them so eventually all pop up windows are not resizable in all broswers?
I know where to put the css elements, in the window.open function, I just want to know other css ways that can make pop up windows not resizable for all browsers
Browsers using (all latest browsers): IE, Firefox, Google Chrome, safari and Opera
You can't do this with CSS - you need to pass the resizable parameter to your window.open() function. If you're using an anchor with the target attribute, you need to use JavaScript instead.
JS Example
window.open ("http://URL","mywin","menubar=1,resizable=0,width=350,height=250");
JS & HTML Example
<a href="#"
onclick="window.open ('http://URL','mywin','resizable=0,width=350,height=250')">Open</a>
Additional Resources
Take a look at the window.open docs on MDN: https://developer.mozilla.org/en/DOM/window.open
According to MDN, Firefox will not support the resizable attribute:
resizable
If this feature is set to yes, the new secondary window
will be resizable. Note: Starting with version 1.4, Mozilla-based
browsers have a window resizing grippy at the right end of the status
bar, this ensures that users can resize the browser window even if the
web author requested this secondary window to be non-resizable. In
such case, the maximize/restore icon in the window's titlebar will be
disabled and the window's borders won't allow resizing but the window
will still be resizable via that grippy in the status bar.
Starting
with Firefox 3, secondary windows are always resizable ( bug 177838 )
Firefox doesn't support this.
have a look here:
how can we disable resizing of new popup window in firefox?
futher more, it's a bad idea to make it not-resizeable. what if your users are visually impaired have have there settings to have large fonts?
Better late than never. Got this working:
window.addEventListener('load', () => {
const popup = window;
console.log(popup);
popup.addEventListener("resize", () => {
popup.resizeTo(306, 512);
})
});