Safari Browser div collapsing height - javascript

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.

Related

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.

How to add drag-to-edge overflow div scrolling behaviour

I am using HTML5 Drag and Drop API to reorganize elements in a vertical list. The list is an overflow-y: scroll div. On macOS Chrome and macOS Firefox, if an item is dragged very close (~20px) to the inside edge of the container, the container is scrolled. This behaviour is not present on macOS Safari.
JSFiddle Demo
I am interested in how to implement a modified version of this behaviour for all modern browsers:
How to have a larger scroll activation region. On macOS Chrome it must be inside the container and is relatively small (20px). Preferably it could be increased to something like 15% of the container height.
Preferably the region would remain inside the list (so if you scroll outside the list the container is not scrolled)
How to disable the apparently undocumented Chrome scrolling behaviour. (Assuming it isn't possible to "enable" this feature on Safari, Edge).
Constraints:
A raw JavaScript / html / css solution is acceptable
I am using React, so a React library that works with raw JS HTML5 Drag n Drop would also be acceptable
No jQuery
Edit: Updated browser support description, updated JSFiddle to support macOS Firefox.

Compablity issue with Chrome Web Browser

We have developed a website using HTML, css and javascriipting. When we open it in Mozilla firefox then we get correct display for the webpage but when we open it in Chrome browser then we gets a gap between news and event box and the images which we put just below it.
Link for the website is here.
I am attaching some screen shots to get a clear picture for the issue.
I guess the problem is with the height of marquee tag. In firefox, it is auto adjusting the height while in chrome it is taking some other height.
One workaround will be to give Inline height to marquee .eg:- give height:164 px.

Fixed position not working on ios devices

I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.
Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.

qx.ui.table.Table hangs my browser

I have a strange bug. I create a qx.ui.table.Table and if not all specified columns fit into window (horizontal scroll appear) my browsers (firefox 3.5.6 and chrome 5.0.344) hangs. If i just set width for window large (e.g. from 600px to 800px) - all works fine.
May be I'm doing something wrong? Or how can I fix/avoid this 'strange' behaviour?
This is a know bug in qooxdoo. See http://bugzilla.qooxdoo.org/show_bug.cgi?id=3279 for details. We will (hopefully!) fix this issue in qooxdoo 1.0.2.
For this moment you have to set dimensions of the widget containing the table slightly larger than table.

Categories