We Keep Coding

Absolutely positioned image with a percentage height in CSS grid acts weird on iOS or in Safari

I want to start by mentioning that I have seen and read this question, so I know that Safari (and iOS) handle the height property differently than Chrome. This problem does however feel a bit different. Anyways:
I have a list of items that is styled with flexbox. Each entry is a grid containing various types of information. However, each entry also consists of an image that is positioned absolutely in relation the grid so that it sticks out a bit to the left. An example of how this works can be found here. This works fine in Chrome and looks as expected, but things look weird in Safari. Even though Safari does not use the grid container as a relative height for the image (which has a property of height: 80%), the image seems to align well with the grid. However, all other entries are aligned with the entire body of the page. When inspecting the grid, it doesn't look like it takes up the entire page, yet the other components seem to think that it does.
Why is it that the image looks OK whereas the other components do not? Furthermore, does anybody know a way of solving this problem? I would prefer if the image height could remain as a percentage because i want to re-use the component in other parts of my code.
Thank you.
EDIT: Here are images that show the difference between Chrome and Safari, from the example JSFiddle.
Chrome:
Safari:
EDIT 2: I still don't know why this happens (and I'm intrigued to find out why), but I did figure out a solution to the problem. By setting a specific height for the list entry (i.e. by using grid-template-rows: 50px; for instance), the image size is correctly scaled to the grid row, and the other components are placed correctly.

$window.innerHeight returns different values in chrome and firefox

I want to determine the viewport height with $window.innerHeight or document.documentElement.clientHeight but it turns out that Firefox and Chrome are returning different values (a few pixels).
Anyone already faced this issue?

The height of the body is determined by the available height inside the browser window.
Different browsers have different graphic interfaces, varying toolbar heights, number of toolbars, etc. All those elements will influence the height available for the actual HTML content.
Try the following in various browsers (in full size)
console.log(document.documentElement.clientHeight)

The height you are getting is more that likely because the design of firefox and chrome are different by a few pixels. I can resize my browser to however I want. Monitor and resolution also determines that. Not really an issue if you are designing your UI correctly, meaning using media queries in CSS and creating a responsive design instead of fixed values.

Safari Browser div collapsing height

On this page http://bit.ly/202URGh, when I click on Book Size (Second row icons) and then click on Book type (First row icons), the image collapses into the other div.
I have added clearfix, but that seems to have had no effect. This seems to be a problem only in Safari on Mac. Other browsers work fine.
Can someone help. My problem is compounded because I don't have a Mac to test.

I understood the source of the problem. Issue was because I was trying to get the height of image dynamically. Safari (and webkit based browsers) do not seem to support dynamic height computation. Jquery was returning the height as zero and hence the div was collapsing.

window.innerHeight consistent between Chrome's baked in UI elements

I'm sure this is the working as intended, but I find it kind of a pain.
In Chrome (and probably other browsers)
Generally, window.innerHeight gives me 801 (for example).
If I have a console open along the bottom half of my screen (going horizontally), this changes my window.innerHeight. If I've downloaded something, this pops up a bar at the bottom of the window and also changes window.innerHeight.
I don't having the dev tools open to make my site feel broken.
Is there a different measurement to use in javascript to ignore UI?
I don't want outerWidth, because this includes window tab heights and they won't be consistent cross browser.
I essentially want the height to be consistent whether or not there are any chrome ui elements present.

I don't think you can get exactly that number! The closest you can get is calculating the available height, minus os taskbar and such by using:
window.screen.availHeight
Which MDN says:
Returns the amount of vertical space available to the window on the
screen.
I made a jsfiddle to try it in here
MDN availHeight article

Set viewport size for a browser

I was playing with a webapplication page developed by me using selenium.
Using selenium JavaScriptExecutor I executed following script.
executor.executeScript("return window.innerWidth");
executor.executeScript("return window.innerHeight");
to my surprise, the so called viewport size came different from Chrome, IE & Firefox.
Chrome: 1366x667
IE: 1366x667
Firefox: 1366x657
Then I realized that for body and main div, right next to body I gave css style width and height as 100% which in turn effects the view port size. As different borwsers are having different size of toolbars and menu, this 100% value changes when actual page is rendered.
So I used window.resizeTo(w,h) for setting a common viewport size. But I realized it doesn't work with modern browsers until and unless window is opened by the same script.
So I used selenium's
driver.manage().window().setSize(new Dimension(w,h));
yet I am not able to set the common view port size.
Please help to find, is it possible to set common viewport size using selenium?
Do let me know, if you need anymore info.
I executed following line for all browsers:
driver.manage().window().getSize();
Answer I got is 1382x744
So I believe this about the overall browser window, not only rendering area.
And I got confused that based on the difference of innerWidth how to calculate the browser window's new size?
PS: I have all the browsers upgraded to latest version (IE is version 11 as I am on windows 7), selenium version I am using is 2.46.x

"to my surprise, the so called viewport size came different from Chrome, IE & Firefox."
It should not be surprising that the view port size is different on all browsers, Safari even has a different one as well. When you are calling window.innerHeight it only counts the browsers inner content. So anything outside of it is not counted, the area where you enter your URL is entered is not counted for example. So each browser uses a different amount of maximum height by their tabs, and Global address bar.
When you use driver.manage().window().setSize(new Dimension(w,h)); and set it to 1920x1080 for example then all browsers will be set to that size, but of course they will have different inner height being used.
If you want the entire browser to render as 1920x1080 then I would suggest with
using Robot robot = new Robot();
robot.keyPress(KeyEvent.VK_F11);
Thread.sleep(250);
robot.keyRelease(KeyEvent.VK_F11);
but I would advise against it, since a more valid test is to use the normal inner height of the browser, since most user do not press F11 and view their content at full screen.