just put -webkit-sticky where you have sticky for now xd
i doubt that it will help tho, but im not very familair with ios
Ah yes, already tried that, it doesnāt recognize -webkit-sticky.
yeah thought so, you might have to go to the raw theme.css afterall to make this work in safari
you know how theme.css works?
else you can also do injection, not a good practice but its a lot easier to test xd
Yes, Iām somewhat familiar with the theme.css. For instance, I"m using the built-in light-warm theme. Now I just need to know which css file I can put some of this in (Globals.css?).
its best to make a new theme that imports the other themes i guess.
you should proabbly first just test it out with injection thats a lot faster
i did this and it works (on chrome and should use webkit on safari)
i created a style class named āstickyā (in the root, so no subfolders)
in the backgroundcolor of this style pase this to inject it:
}.psc-sticky>div:nth-child(1){position=-webkit-sticky !important; position:sticky !important; top:0px !important; left:auto !important; margin-left:50px} .psc-sticky>div:nth-child(2){position=-webkit-sticky !important; position:sticky !important; top:auto !important; left:0 !important;}{
give this style to the viewcanvas (not the instances)
the first instance is the header, the second the left border
it does not work if you give it to the instances like this as for some reason there is a div in between xd
(yes ā!importantā is required else igntion overwrites it)
the crossed out line should work in safari i guess
Tried this and still doesn't work within the perspective iOS app. Thank you so much for all the suggestions, it helps and motivates me in the right direction in different things I can do with these kinds of things.
Weird, is it by chance an older ios model? What version of safari is it running?
it needs to be 6+ to work with webkit and 13+ to work without it (like chrome) (i could run some tests here too if i know you version in a vm xd)
Can you set the overflow of all elements to scroll instead of auto, welh atleast for the canvas? Seems Safari has some problems with that one too.
No, the iOS is newer and an iPhone SE 2020 model and Iām using the Perspective app, safari should be on the newest version.
For the overflow - I had to set them to visible to get this far, the weird thing is the canvas needed overflow set to auto, anything else makes it worse (contrary to what others have said generally).
hm with visible there shouldnt be any scrolbars tho xd
actually does it work in the app on a windows desktop? the workstation
i just tried to run my fix
on a safari in a ios emulator in a chrome browser.. and that seemed to work tho. but ofc it are emulators so that is another weird thing xD
can you run the website on safari and open the inspotor there to check out the classes? and see if you find this
did you manage to get this styleclass working on the browser (in windows) do you see it there?
Iāve been using the built-in developer tools in Chrome and select the iPhone presets for display size. It has always worked in that mode. On the right, I can view the code, but not sure if this is emulating iOS. Are you using a different browser or extension plug-in?
I didnāt have any issues with declaring a sticky position. I attached a sample video.
1 Like
Yes its working but do you find the style? you can use ctrl+shift+c to enter inspect elemnt, just click the first label of the header and you might have to go up a few divs to find the container where you should find the css classes in.
Using that is not enough to emulate ios, you need a vm for that, if you have an ios device its not worth setting up an emulator , as its clucky to use and not the real deal anyways. apple is quite peculiar about vmsā¦
ive updated the script a bit, it should work more consistent the āleft 50pxā was wrong afterall it should have been on auto with a margin instead. actually not sure how it even worked in the first place xD maybe this will solve the thing in ios too idk it still might be something else, i gotta see what you have
}.psc-sticky>div:nth-child(1){position=-webkit-sticky !important; position:sticky !important; top:0px !important; left:auto !important; margin-left:50px} .psc-sticky>div:nth-child(2){position=-webkit-sticky !important; position:sticky !important; top:auto !important; left:0 !important;}{
Can you share this resource?