Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'safari'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. As much as I'm loving the evolution of SS (we have about 100 sites on the platform currently and have been working with it for about 5 years), I'm disappointed to have to switch back to Chrome due to the SS experience now being unbearable on Safari. This won't be an issue for you Windows users, but the huge backlash against Chrome (mostly over privacy) has caused us to [attempt to] switch to Safari since it's native (unlike Firefox), fast, and simple. However, as of this month, we're finding SS to be almost unusable in Safari... When clicking to edit any block on an SS site, Safari jumps back to the top of the page. When you scroll back down to click on the block again, it puts it into Edit mode, but it once again jumps back to the top of the page. When you scroll back down to that block again, you can then edit. So, it takes 3 clicks and 3 scrolls to edit any block on any page on any site. And with many of our pages being long, scrolling pages, this takes about 5 times longer to edit a site on Safari than on Chrome. I know that Safari only has about 16% global market share but that number includes all Windows and ChromeOS users. Amongst Mac users in North America, the percentage is much higher. I would estimate that about 25% of SS users are on Safari, so why isn't the compatibility a bigger issue? SS is literally the only reason we are forced to keep using Chrome at our agency.
  2. Site URL: https://www.alexandra-lyon.com Hi! Seeking help with this, any insight is so appreciated! Just noticed the buttons on my clients site look different on Safari and Chrome. On Chrome they show up like this: https://www.alexandra-lyon.com/ https://www.alexandra-lyon.com/course But on Safari they show up like this: https://www.alexandra-lyon.com/ https://www.alexandra-lyon.com/course This is the code I used to further customize the site styles: //Button outline// .primary-button-style-outline .sqs-block-button-element--small, .primary-button-style-outline .sqs-block-button-element--medium, .primary-button-style-outline .sqs-block-button-element--large, .primary-button-style-outline .image-button a, .primary-button-style-outline .newsletter-form-button, .primary-button-style-outline .list-item-content__button { border-width: 1px; border-style: solid; } .primary-button-style-outline .dark .sqs-block-form .sqs-editable-button { background: transparent!important; color: #ffffff!important; border-color: #ffffff!important; font-family: ss-pro!important; font-weight: 600!important; font-style: normal!important; text-transform: uppercase!important; line-height: 1.2em!important; letter-spacing: .25em!important; font-size: .8rem!important; } .primary-button-style-outline .dark .sqs-block-form .sqs-editable-button:hover { background: #ffffff!important; color: #888!important; border-color: #ffffff!important; } Any help is so appreciated, thank you!!
  3. Site URL: https://www.westbrookinnovative.com Good afternoon! My font seems to be displaying correctly in Chrome, but not Safari. This is the CSS I'm using: h3 strong {font-family: 'Montserrat'; font-weight: 100;color:#black; font-size:40pt; line-height: 40pt; letter-spacing: -1px} h3 em{color:#a5ce43; font-style:normal; font-weight: 300} Any help would be appreciated!
  4. Site URL: http://www.thriveacfund.com When viewing my site on Safari at certain breakpoints a space appears in front of the line break, making the text misaligned. Looking for a way to correct the line break to occur after the space, not before, as I'm assuming this is the issue? The issue (on Safari, added a red box to indicate the issue area) The correct appearance (Chrome). I have checked and there is no extra spacing in my copy; the issue also only seems to appear in Safari not Chrome. site: thriveacfund.com pw: thrive2022 Thank you!
  5. Site URL: https://markusgjengaar.com/ Hi! I've made a custom HTML/CSS code that could play a video on my front page. The video works on Safari (both mobil and desktop) and it works on Google Chrome on my iPhone. However the video does not work on Chrome Desktop version for some reason. It used to work, but now it does not play anything. It's just a blank black space where the video should be. Anyone out there knows whats happening? Here is my code: <section class="Intro"> <video class="Intro-video" src="/s/Hero-Home-page_v4.mp4" preload="auto" autoplay="auto" playsinline="auto" muted="auto" loop="auto" > </video> </section> <style> .Intro-video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; } .Intro { width: 100%; height: 80vh; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; overflow: hidden; z-index: 1; } </style>
  6. Site URL: https://www.thorpe-hall.org/paypalbookingform I have a form built with google apps script: https://script.google.com/a/macros/thorpe-hall.org/s/AKfycbzSjpbW8moBJ75Q82NEux6ezDTbFAEtGIVki4i0PcelrbxjveletfyYtZ1ic9rQ_k-Szg/exec. I would like to display it in a code block as an iframe: eg: <iframe src="https://script.google.com/a/macros/thorpe-hall.org/s/AKfycbywQJsGAqumlhdBvw0AlYy6b2fFfqKy8cn8wgY0FYGCURQZApeVCnU2ZlxiUFyxKaTWAg/exec" > Loading ... </iframe> This displays ok on MS edge and on Chrome but does not display at all in Safari, at least v11. Interestingly, the parent div does display, just not the form. Also, I have another a form, this one created using google forms, and included in a code block as an iframe: <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScBeUGhrtxNNqq4F0FS0dWPwwTFMNAr6llRu-p343dYoWjUcg/viewform?embedded=true" > </iframe> and this DOES display fine in all three browsers mentioned above. so it seems that my safari browser will display an iframe ok, but presumably only if it is setup ok. So my question is what needs to go into the header of my google apps script form to make it display ok.
  7. Hi, I have complex product variants set up (small, medium and large) and then quantities (bundle of 100, bundle of 200 and so on) and I want to hide certain options from the quantities list and only display those relevant to the consumer. unfortunately squarespace doesn't allow this as standard. Here is my code (in a code block under "additional info" in the inventory product). This works fine in Chrome but not in Safari or iOS. In Safari the dropdown menus don't update to show the customer's choice (eg small, bundle of 100). Does anyone know what the issue in Safari is? <script type="text/javascript"> $(function() { $("select[data-variant-option-name='size']").change(function () { console.log($(this).val()); if ($(this).val() == 'small') { $("select[data-variant-option-name='pack of']") .find("option") .remove() .end() .val("Select pack of"); var selectSize = {"Select pack of":"Select pack of","bundle of 100":"bundle of 100","bundle of 200":"bundle of 200", "box of 1000":"box of 1000"} $.each(selectSize, function(key, value) { $("select[data-variant-option-name='pack of']") .append($("<option></option>") .prop("value",key) .text(value)); }); }; console.log($(this).val()); if ($(this).val() == 'medium') { $("select[data-variant-option-name='pack of']") .find("option") .remove() .end() .val("Select pack of"); var selectSize = {"Select pack of":"Select pack of","bundle of 50":"bundle of 50","bundle of 100":"bundle of 100", "box of 500":"box of 500"} $.each(selectSize, function(key, value) { $("select[data-variant-option-name='pack of']") .append($("<option></option>") .prop("value",key) .text(value)); }); }; console.log($(this).val()); if ($(this).val() == 'large') { $("select[data-variant-option-name='pack of']") .find("option") .remove() .end() .val("Select pack of"); var selectSize = {"Select pack of":"Select pack of","bundle of 50":"bundle of 50","box of 200":"box of 200"} $.each(selectSize, function(key, value) { $("select[data-variant-option-name='pack of']") .append($("<option></option>") .prop("value",key) .text(value)); }); }; }); }); </script>
  8. So I've asked the "Customer Care" team a few times about this issue. Site scrolls fine on desktop but on mobile it is choppy and jumps up and down as you go by different content. I've tried experimenting with parallax content on and off and other things, but it still happens. And quite frankly, just turning off parallax wouldn't be a "solution" really. So the answer I always get is, "We're aware of this, but no ETA on a fix." That's just not acceptable. So I'm posting this to see if anyone has had any success with any hack to improve how jumpy things are on mobile. We predominantly use Sonora and Mojave templates. Perhaps it isn't as bad on some templates? Thanks.
  9. Hi everyone, I've customised a form on my site slightly using CSS and it is appearing perfectly everywhere except for Safari on a 15inch screen. The form fields are getting cut off (see below image). All other browsers are fine and Safari on mobile and larger screens eg 27inch are fine it's just Safari on 15inch screen. This is the code I am using to customise. //---CONTACT FORM CUSTOMISATION //- Titles .form-wrapper .field-list .title { display: none; } //--Fields .form-wrapper .field-list .field .field-element { border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0px !important; background: #F5F4EE; padding: 10px 10px 10px 0px }
  10. Site URL: https://www.rebeccaannelouisewatson.com Hiya, i am using a custom font 'neue machina', which seems to work on chrome, but doesn't on safari or mobile. I have tried many custom codes, but none have worked. I am desperate to get this working, so any help would be so gratefully appreciated. thank you in advance
  11. Site URL: https://chihuahua-parrot-rjda.squarespace.com/ I've added a custom font (both woff and woff2 files) and it's working fine for Chrome but not Safari. Safari is showing up as a serif font, even though the font pack selected in squarespace is sans serif (Neue Haas). Here is my code: @font-face {font-family: 'Banana-Grotesk-Regular'; src:url(https://static1.squarespace.com/static/6099b1999f075203e3da1346/t/609cbd37811c1e67f7a48445/1620884791285/BananaGrotesk-Regular.woff) format('woff'), url(https://static1.squarespace.com/static/6099b1999f075203e3da1346/t/609cbd3ca6cf026bb5edcc79/1620884796131/BananaGrotesk-Regular.woff2) format('woff2'),} .header-nav *, nav.header-menu-nav-list * { font-family: 'BananaGrotesk-Regular' !important;} Site URL: https://chihuahua-parrot-rjda.squarespace.com/ Site password: RG999!!! Any help would be fabulous! Thank you!
  12. Hi Everyone First time posting so apologies for any mistakes. We currently have a site being developed and we've had some custom code put on to the landing page. The code creates a search widget which is linked to our vacation rental software. Once the code was complete and uploaded to the site we requested some minor changes, the problem we have is that you can see the old version on safari and when you make the window smaller you can see the new lines in behind. The new up to date code looks ok on chrome. is this an issue with the browser or the code? Any support on the matter would be greatly appreciated Thanks in advance David
  13. I've added a split navigation for a client and it looks and works great on Google Chrome, however as soon as open de website on Safari the navigation items all seem to be pushed together. However, as soon as I hover over the services tab it fixes itself. Anyone have any experience with this or might know what is going on? I've added screenshots. Bottom screenshot shows what it looks like when I open the site, the top one is what it is supposed to look like. Thanks!
  14. Site URL: https://www.yellowbikepress.com/ Hello! Here is the site I am working on and the page I am referencing: https://www.yellowbikepress.com/blog. I used code to change the font of the blog post title and "Read More" button in the summary section, as well as the "Sign Up" button in the Subscribe section on the right. In Chrome the fonts show up fine, however in Safari they don't appear. Here is the correct formatting: And here is how it appears in Safari: Any thoughts on how to fix this? Thanks!
  15. Site URL: https://www.lucylawson.co.uk Hi there, My clients website is viewing the custom fonts differently on safari and iOs. Looks totally as expected on Chrome, but appears different on Safari. .ttf .otf .woff .woff2 have all been uploaded. @font-face { font-family: 'NoeDisplay'; src: url('https://static1.squarespace.com/static/60661ef2806161468599d160/t/60661fb6b8414c574a547e86/1617305526790/NoeDisplay-Black.otf'); font-weight: black; } @font-face { font-family: 'Graphik'; src: url('https://static1.squarespace.com/static/60661ef2806161468599d160/t/60661fd8db8f047724129954/1617305560410/Graphik-Black.otf') } h1 {font-family: 'NoeDisplay-Black';} h2 {font-family: 'NoeDisplay-Medium';} h3 {font-family: 'Graphik-Medium';}
  16. Site URL: https://www.novospectrum.com/top-teams Hi All, I have something strange happening in my website and i cant seem to find the solution why its happening. In Safari, when I activate the full screen function of my implemented issuu document, a bar is showing on top of the full screen document. With some testing with the transparanties of certain styles in my design, i found out the bar is responding to the 'content background color'. Making the content background color transparant solves my issue, but then the design of the website changes, and of course i don't want that to happen. It would maybe make sense to change the z-index of the content background color, but this would also influence the design, and assuming the Issuu full screen z-index is already on 2147483647, the content background color must be behind it anyway. Did anybody maybe experience similar issues, or has any suggestion of a solution? Thanks in advance p
  17. Site URL: https://www.awakenkali.com/ Hello, I've uploaded a font to squarespace and added the CSS code but it doesnt show on some computers/browsers like safari. Any advice? Here is the code I typed: @font-face { font-family: Classico; src: url();https://static1.squarespace.com/static/605f4ff1a45fbc59069babdc/t/606f07e087c8fc5a71d384f9/1617889248411/Classico.otf } @font-face { font-family: Classico-Bold; src: url();https://static1.squarespace.com/static/605f4ff1a45fbc59069babdc/t/606f07e087c8fc5a71d384f9/1617889248411/Classico.otfhttps://static1.squarespace.com/static/605f4ff1a45fbc59069babdc/t/606f094d3062b77635fbb408/1617889613671/Classico-Bold.otf } h1 { font-family: Classico; } h2 { font-family: Classico; } h3 { font-family: Classico; } H4 { font-family: Classico; } .header-title-text { font-family:Classico; } @media screen and (max-width:640px) { @font-face { font-family: 'Classico'; src: url('https://static1.squarespace.com/static/605f4ff1a45fbc59069babdc/t/606f07e087c8fc5a71d384f9/1617889248411/Classico.otf'); } h1#sqs-slash-page-header { font-family: 'Classico' !important; } }
  18. Site URL: https://www.movingexperience.me/ I used custom css to justify text on my webiste. This is what I used in the : p { text-align: justify } I also tried adding this to the code blocks: <p style="text-align: justify ;margin-top:-20px;white-space:pre-wrap;font-weight: 500;" Now it is only being displayed correctly when the site is viewed in google chrome, it doesn't work in safari. I also tried adding this: body p, .sqs-layout .sqs-block.html-block p { text-align: justify !important; } but it's only affecting the regular text blocks, not the coding blocks with the text I actually want to justify. I'm thankful for any ideas what might be the problem here!
  19. Site URL: https://www.passwithpebbles.com/ HI - I have a whole lot of custom code on this website - and its giving me so much of a headache - help appreciated where ever possible! firstly there's is an additional font in Heading 2 and Paragraph 2 - a squarespace font - 'Rollerscript smooth' Its not showing in safari or on mobile. I have added it as Rollerscript & rollerscript-smooth - no change. I've looked at past posts and every answer is different what's the up to date resolution? www.passwithpebbles.com - pw P388l3s (thats a lower case L not a 1) h1 { font-family: 'Circe'; } h2 { font-family: 'Rollerscript-smooth'; } h3 { font-family: 'circe'; } H4 { font-family: 'circe'; } .sqsrte-large { font-family: 'Rollerscript-smooth'; } p { font-family: 'Circe'; } .sqsrte-small { font-family: 'Circe'; }
  20. Site URL: https://www.takecontrolphysicaltherapy.com/ Hi, I have added a secondary font for my H3 and H4 headers on my client's site, but it won't load properly on Safari (desktop or mobile). The font is a Squarespace available font (Museo Slab). Here is the code I am using: /* header changes */ h3 { font-family: "museo slab"!important; font-weight: 500; line-height: 1.15em; } h4 { font-family: "museo slab"!important; font-weight: 500; line-height: 1.15em; } TIA!
  21. Site URL: http://www.thepeak1group.com/home Hi there, I'm using the following CSS code (in Custom CSS under the Design tab, in a 7.0 Brine family site) to add drop shadows to specific images: This works *perfectly* on Chrome and I never realized there were issues with it until working with a client this week who primarily uses Safari (I work on Chrome) -- he noticed that there were "breaks" in the drop shadows across the site where I'd used the code to create the shadows. I even tried a code to add drop shadows to ALL images universally (instead of using block IDs to isolate specific ones) and still ran into issues...but only on Safari. Is there a fix for this? Or something that needs to get added/edited/removed from the code that would enable Safari to recognize it and implement it correctly? Or another code entirely that would help Safari read it correctly? This is my first time running into cross-browser issues. Attaching an image from each browser for a "shadow break" example. Thanks so much!
  22. Site URL: https://mabuhay.squarespace.com Hi! I'm using an Adobe font for one of my headings (H4) via custom CSS on 7.1. It's showing correctly on Chrome and Firefox but not on Safari. Any advice how to solve this issue? Code I'm using: h4 {font-family: Olicana !important; font-size: 50px;} Used in the footer on "The service you can trust". I have the same issue on some other pages where it's used in headings. The fallback font is also not the regular heading font I'm using on this website.
  23. Hello! I use a large Heading 1 and a smaller Heading 4 on my site and they look great on Firefox, but on Chrome and Safari all of the heading styles appear as the same size. Is there any fix for this? Thanks!
  24. Site URL: https://www.alexandrebustamante.com I've uploaded WOFF custom webfonts to my website (it's password protected, just enter bustabusta if you need to view it), but they are not displaying on Safari or iOS (or Chrome on iOS). It works fine on Chrome and Firefox on Desktop. The template I'm using is Zion - can anyone help me clarify what is happening?
  25. Hi im trying to add an anchor link into my website and want it to smooth scroll to it. Unfortunately I cannot find a way to make it work with safari, it works with chrome I have enabled smooth scroll in Design > Custom CSS
×
×
  • Create New...