While attempting to use scroll-margin-top on an anchor point to create space for my sticky header, I discovered that it is not compatible with Safari.
The documentation provided in this link - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin highlights the issue:
Scroll margin does not work for scrolls to fragment target or scrollIntoView(), as mentioned in bug 189265.
An alternative name for this property is scroll-snap-margin.
Is there a workaround available for this bug?
After extensive testing, I have finally discovered a solution that is compatible with both Safari and Firefox. It involves using Safari-specific selectors which may not be ideal due to limitations in styling options when padding is applied to the Safari element. Despite this drawback, it has proven to be more effective than any other method I have attempted.
.anchor { scroll-margin-top: 130px; }
.anchor::-webkit-full-page-media, .anchor:future, .anchor:root .safari_only { padding-top: 130px;}Encountered a similar issue while using Safari, here's how I resolved it:
[identifier] {
scroll-margin-top: 3ex;
outline: 0 none;
@media screen and (-webkit-min-device-pixel-ratio:0) {
margin-top: -3ex;
padding-top: 3ex;
}
}
After encountering a problem with scroll-margin-top in Safari, I discovered that it now works perfectly fine on IOS. Initially facing an issue with this property in Safari, I referred to resources from Mozilla and "CanIuse" mentioned by other users who validated that the latest versions of Safari fully support scroll-margin-top.
The specific issue in my case was related to setting scroll-margin-top on an element with "display: inline". Resolving it required changing the display property to "inline-block". Interestingly, this issue did not arise in desktop browsers, where the property functioned well with "display: inline", but specifically in IOS (Safari and Chrome), it necessitated using "inline-block". It was quite challenging to identify this solution, and I hope sharing this experience can benefit others.
As per information from caniuse.com, Safari now supports the use of scroll-margin-top.
However, I received a notification in VS Code through the webhint plugin advising me to utilize scroll-snap-margin-top to ensure compatibility with Safari version 11 and above. Additional insights can be found in a related article and a relevant stackoverflow question that echoes this sentiment.
The recommendation is to switch to using scroll-snap-margin-top instead of scroll-margin-top, as Safari has incorporated it within the CSS scroll snap module specifically for use with scroll snap containers.
Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...
Do you think there may be an issue with the FormValidation package, or am I overlooking something? Upon testing a standard Bootstrap page, such as the "Stacked Form" example from this site, the form validates and displays icons correctly. https://i.sstat ...
Hey everyone, I'm having trouble with my simple PHP test code. I can't seem to get the err value that I want. 2.php $error = "abc"; $er = json_encode($error); return $er; Here's my HTML: <html> <head> <script src="https:// ...
I seem to have overlooked a simple issue with this form field validation method. It has worked effectively for me in the past, but now, despite checking all file paths, every time I submit the form, it sends an email regardless of the field content. You c ...
I'm working on a test.aspx page. Here is the HTML code I have: <script type='text/javascript' language='javascript' src="scripts/test.js"></script> <script type="text/javascript" language='javascript' s ...
I'm currently working on aligning a logo and navigation bar in a single row at the top of a website using CSS grid. After writing the code, I'm having trouble figuring out why it's not functioning as intended: https://codepen.io/chloewb/pen ...
Below is the anchor tag provided: <a class="uppercase" routerLink="settings/pressure" routerLinkActive="text-success" (click)="closeModal()" > <div class="pad-btm"> PRESSURE </div> </a> I need to include another route ...
On my website, I have created a main page with three divs: header, footer, and main. The header div contains buttons that change the content of the main div when clicked. Rather than reloading the entire page, only the main div is updated with a new HTML p ...
Trying to create a download button for an image with the code below: <a href="https://media.npr.org/assets/img/2017/09/14/gettyimages-10141026_slide-67be9fc1bca330b26debade87690b5e84286614d-s800-c85.jpg" class="btn btn-outline-success btn-sm" targe ...
I am currently working on a web application that utilizes a single input form filled through a barcode scanner. I have encountered an issue where the scanner prematurely submits when scanning barcodes with more than 6 characters, resulting in incorrect dat ...
I've been diving into the world of nodeJS, jquery-mobile, and HTML5. Below is a snippet of my code: Fetching post data from an html form: req.addListener("data", function(postDataChunk){ postData += postDataChunk; console.log("Received POST ...
I'm working on creating a CSS flow chart diagram and I've included an image below for reference. Might there be a straightforward method to achieve this? I've been scouring the web for examples, but I'm unsure of what terminology to use ...
Currently working with Laravel 5.8 and utilizing the laravel-admin Template for administrative purposes. There are times when I require custom JavaScript and CSS files specifically for certain admin controllers. How can I include these JS and CSS in lara ...
Objective My goal is to design a component that showcases details about a device, including an icon and its current status. For instance: https://i.sstatic.net/UhpnG.png Approach I've Taken I am attempting to accomplish this by structuring a MUI Gr ...
Struggling to convert HTML & CSS into a downloadable PDF page using Django and Weasyprint. The current tutorial isn't working as expected - I need the PDF to render the current page when the user clicks on the download button, automatically downloadin ...
I'm trying to center a CSS spinner on the page, but I am struggling with making it happen. Even when scaled down by 50%, the height and width remain at 200px. <div class="center" style=""> <div class="uil-default-css" style="width: 200px ...
I've implemented the Jquery form plugin for submitting login form data and it's working well. However, I am facing an issue with redirecting a successfully logged-in user to the client panel from the login page in my PHP script. Whenever a user s ...
One of the functionalities I am working on involves a text field and an AJAX function to search for a specific string. Here's how it operates: a user inputs a search identifier in the designated field, and then an AJAX function is triggered to find th ...
I am trying to prevent the page from refreshing when clicking on a select option, but when I do so, the data does not get updated. Here is the code: echo "<form name='frmtopdevotees' method='post' action='topuser_load.php&apos ...
Greetings! I am curious to know if it is feasible for my navigation bar to adjust its size according to different screen sizes. For instance, I would like the nav bar to be visible at a specific height on desktops and appear smaller at a different height o ...