Fossil SCM

Revisit [b0188ce122] to improve compatibility with web browsers lacking support for `overflow-y: clip'. It's a bit strange that `overflow-y: hidden' still truncates the box shadows, so this fallback style is only applied temporarily during the accordion panel animations.

florian 2026-01-14 12:57 trunk

Commit 490ddadcfa4a15327b1a9c408c4db7f4ca8d80956e1c9b7f8194a4a8eae710c1

Parent 2a387c970dd42bb…

1 file changed +23

~ src/accordion.js

M src/accordion.js

+23

		--- src/accordion.js
		+++ src/accordion.js
		@@ -22,10 +22,27 @@
22	22	** calculated. That's why setting `maxHeight' to `scrollHeight' is considered
23	23	** "good enough" only during animation, but cleared afterwards.
24	24	**
25	25	** https://fossil-scm.org/forum/forumpost/66d7075f40
26	26	** https://fossil-scm.org/home/timeline?r=accordion-fix
	27	+**
	28	+** To work around the missing support for `overflow-y: clip', this script uses a
	29	+** fallback and sets `overflow-y: hidden' during the accordion panel animations.
	30	+** That's because if `overflow-y: hidden' is set statically from the stylesheet,
	31	+** the shadow of the selected or current timeline entries in the context section
	32	+** of `/info' pages is still truncated on the right (which is strange, as that's
	33	+** not the "y" direction) in all major browsers. Otherwise, the stylesheet might
	34	+** define the fallback using the `@supports(…)' at-rule:
	35	+**
	36	+** .accordion_panel {
	37	+** overflow-y: hidden;
	38	+** }
	39	+** @supports(overflow-y: clip) {
	40	+** .accordion_panel {
	41	+** overflow-y: clip;
	42	+** }
	43	+** }
27	44	*/
28	45	var acc_svgdata = ["data:image/svg+xml,"+
29	46	"%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
30	47	"%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
31	48	"%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
		@@ -52,15 +69,21 @@
52	69	var x = this.nextElementSibling;
53	70	if( this.classList.contains("accordion_closed") ){
54	71	x.style.maxHeight = x.scrollHeight + "px";
55	72	setTimeout(function(){
56	73	x.style.maxHeight = "";
	74	+ if( !window.CSS \|\| !window.CSS.supports("overflow: clip") ){
	75	+ x.style.overflowY = "";
	76	+ }
57	77	},250); // default.css: .accordion_panel { transition-duration }
58	78	}else{
59	79	x.style.maxHeight = x.scrollHeight + "px";
	80	+ if( !window.CSS \|\| !window.CSS.supports("overflow: clip") ){
	81	+ x.style.overflowY = "hidden";
	82	+ }
60	83	setTimeout(function(){
61	84	x.style.maxHeight = "0";
62	85	},1);
63	86	}
64	87	this.classList.toggle("accordion_closed");
65	88	});
66	89	}
67	90

	--- src/accordion.js
	+++ src/accordion.js
	@@ -22,10 +22,27 @@
22	** calculated. That's why setting `maxHeight' to `scrollHeight' is considered
23	** "good enough" only during animation, but cleared afterwards.
24	**
25	** https://fossil-scm.org/forum/forumpost/66d7075f40
26	** https://fossil-scm.org/home/timeline?r=accordion-fix

















27	*/
28	var acc_svgdata = ["data:image/svg+xml,"+
29	"%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
30	"%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
31	"%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
	@@ -52,15 +69,21 @@
52	var x = this.nextElementSibling;
53	if( this.classList.contains("accordion_closed") ){
54	x.style.maxHeight = x.scrollHeight + "px";
55	setTimeout(function(){
56	x.style.maxHeight = "";



57	},250); // default.css: .accordion_panel { transition-duration }
58	}else{
59	x.style.maxHeight = x.scrollHeight + "px";



60	setTimeout(function(){
61	x.style.maxHeight = "0";
62	},1);
63	}
64	this.classList.toggle("accordion_closed");
65	});
66	}
67

	--- src/accordion.js
	+++ src/accordion.js
	@@ -22,10 +22,27 @@
22	** calculated. That's why setting `maxHeight' to `scrollHeight' is considered
23	** "good enough" only during animation, but cleared afterwards.
24	**
25	** https://fossil-scm.org/forum/forumpost/66d7075f40
26	** https://fossil-scm.org/home/timeline?r=accordion-fix
27	**
28	** To work around the missing support for `overflow-y: clip', this script uses a
29	** fallback and sets `overflow-y: hidden' during the accordion panel animations.
30	** That's because if `overflow-y: hidden' is set statically from the stylesheet,
31	** the shadow of the selected or current timeline entries in the context section
32	** of `/info' pages is still truncated on the right (which is strange, as that's
33	** not the "y" direction) in all major browsers. Otherwise, the stylesheet might
34	** define the fallback using the `@supports(…)' at-rule:
35	**
36	** .accordion_panel {
37	** overflow-y: hidden;
38	** }
39	** @supports(overflow-y: clip) {
40	** .accordion_panel {
41	** overflow-y: clip;
42	** }
43	** }
44	*/
45	var acc_svgdata = ["data:image/svg+xml,"+
46	"%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
47	"%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
48	"%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
	@@ -52,15 +69,21 @@
69	var x = this.nextElementSibling;
70	if( this.classList.contains("accordion_closed") ){
71	x.style.maxHeight = x.scrollHeight + "px";
72	setTimeout(function(){
73	x.style.maxHeight = "";
74	if( !window.CSS \|\| !window.CSS.supports("overflow: clip") ){
75	x.style.overflowY = "";
76	}
77	},250); // default.css: .accordion_panel { transition-duration }
78	}else{
79	x.style.maxHeight = x.scrollHeight + "px";
80	if( !window.CSS \|\| !window.CSS.supports("overflow: clip") ){
81	x.style.overflowY = "hidden";
82	}
83	setTimeout(function(){
84	x.style.maxHeight = "0";
85	},1);
86	}
87	this.classList.toggle("accordion_closed");
88	});
89	}
90

Fossil SCM

Keyboard Shortcuts